Merge pull request #671 from bananazigzags/main

expose showTicket and showConversation

.changeset/smart-pots-cry.md

@@ -0,0 +1,5 @@
+---
+'react-use-intercom': minor
+---
+
+Exposes showTicket and showConversation methods in useIntercom hook

README.md

@@ -150,6 +150,8 @@ Used to retrieve all methods bundled with Intercom. These are based on the offic
 | startSurvey      | (surveyId: number) => void | Trigger a survey in the Messenger by `surveyId`
 | showSpace     | (spaceName: IntercomSpace) => void | Opens the Messenger with the specified space
 | showNews | (newsId: number) => void | Opens the Messenger with the specified news by `newsId`
+| showTicket | (ticketId: number) => void | Opens the Messenger with the specified ticket by `ticketId`
+| showConversation | (conversationId: number) => void | Opens the Messenger with the specified conversation by `conversationId`
 
 
 #### Example
@@ -182,7 +184,9 @@ const HomePage = () => {
     trackEvent,
     showArticle,
     startSurvey,
-    showSpace
+    showSpace,
+    showTicket,
+    showConversation
   } = useIntercom();
 
   const bootWithProps = () => boot({ name: 'Russo' });
@@ -200,6 +204,8 @@ const HomePage = () => {
   const handleShowArticle = () => showArticle(123456);
   const handleStartSurvey = () => startSurvey(123456);
   const handleShowSpace = () => showSpace('tasks');
+  const handleShowTicket = () => showTicket(123);
+  const handleShowConversation = () => showConversation(123);
 
   return (
     <>
@@ -226,6 +232,8 @@ const HomePage = () => {
       <button onClick={handleShowArticle}>Open article in Messenger</button>
       <button onClick={handleStartSurvey}>Start survey in Messenger</button>
       <button onClick={handleShowSpace}>Open space in Messenger</button>
+      <button onClick={handleShowTicket}>Open ticket in Messenger</button>
+      <button onClick={handleShowConversation}>Open conversation in Messenger</button>
     </>
   );
 };

packages/react-use-intercom/README.md

@@ -149,6 +149,8 @@ Used to retrieve all methods bundled with Intercom. These are based on the offic
 | showArticle      | (articleId: string) => void | opens the Messenger with the specified article by `articleId`
 | startSurvey      | (surveyId: number) => void | Trigger a survey in the Messenger by `surveyId`
 | showSpace     | (spaceName: IntercomSpace) => void | Opens the Messenger with the specified space
+| showTicket | (ticketId: number) => void | Opens the Messenger with the specified ticket by `ticketId`
+| showConversation | (conversationId: number) => void | Opens the Messenger with the specified conversation by `conversationId`
 
 #### Example
 ```ts
@@ -180,7 +182,9 @@ const HomePage = () => {
     trackEvent,
     showArticle,
     startSurvey,
-    showSpace
+    showSpace,
+    showTicket,
+    showConversation
   } = useIntercom();
 
   const bootWithProps = () => boot({ name: 'Russo' });
@@ -198,6 +202,8 @@ const HomePage = () => {
   const handleShowArticle = () => showArticle(123456);
   const handleStartSurvey = () => startSurvey(123456);
   const handleShowSpace = () => showSpace('tasks');
+  const handleShowTicket = () => showTicket(123);
+  const handleShowConversation = () => showConversation(123);
 
   return (
     <>
@@ -224,6 +230,8 @@ const HomePage = () => {
       <button onClick={handleShowArticle}>Open article in Messenger</button>
       <button onClick={handleStartSurvey}>Start survey in Messenger</button>
       <button onClick={handleShowSpace}>Open space in Messenger</button>
+      <button onClick={handleShowTicket}>Open ticket in Messenger</button>
+      <button onClick={handleShowConversation}>Open conversation in Messenger</button>
     </>
   );
 };

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

@@ -264,6 +264,22 @@ export const IntercomProvider: React.FC<
     [ensureIntercom],
   );
 
+  const showTicket = React.useCallback(
+    (ticketId: number) =>
+      ensureIntercom('showTicket', () => {
+        IntercomAPI('showTicket', ticketId);
+      }),
+    [ensureIntercom],
+  );
+
+  const showConversation = React.useCallback(
+    (conversationId: number) =>
+      ensureIntercom('showConversation', () => {
+        IntercomAPI('showConversation', conversationId);
+      }),
+    [ensureIntercom],
+  );
+
   const providerValue = React.useMemo<IntercomContextValues>(() => {
     return {
       boot,
@@ -283,6 +299,8 @@ export const IntercomProvider: React.FC<
       startSurvey,
       showSpace,
       showNews,
+      showTicket,
+      showConversation,
     };
   }, [
     boot,
@@ -302,6 +320,8 @@ export const IntercomProvider: React.FC<
     startSurvey,
     showSpace,
     showNews,
+    showTicket,
+    showConversation,
   ]);
 
   return (

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

@@ -247,7 +247,9 @@ export type IntercomMethod =
   | 'startChecklist'
   | 'showArticle'
   | 'showSpace'
-  | 'showNews';
+  | 'showNews'
+  | 'showTicket'
+  | 'showConversation';
 
 export type RawIntercomProps = RawMessengerAttributes & RawDataAttributes;
 
@@ -446,6 +448,21 @@ export type IntercomContextValues = {
    * @example showNews(123)
    */
   showNews: (newsId: number) => void;
+  /**
+   * If you would like to trigger a ticket in the Messenger, you can use the showTicket method.
+   *
+   * The ticket will be shown within the Messenger, and clicking the Messenger back button will return to the previous context.
+   *
+   * If the Messenger is closed when the method is called, it will be opened first and then the ticket will be shown.
+   * @see {@link https://developers.intercom.com/installing-intercom/web/methods/#intercomshowticket-ticketid}
+   */
+  showTicket: (ticketId: number) => void;
+  /**
+   * You can show a conversation programatically in the Messenger by calling showConversation method
+   *
+   * @see {@link https://developers.intercom.com/installing-intercom/web/methods/#intercomshowconversation-conversationid}
+   */
+  showConversation: (conversationId: number) => void;
 };
 
 export type IntercomProviderProps = {