diff --git a/.changeset/smart-pots-cry.md b/.changeset/smart-pots-cry.md new file mode 100644 index 00000000..3f27e4e3 --- /dev/null +++ b/.changeset/smart-pots-cry.md @@ -0,0 +1,5 @@ +--- +'react-use-intercom': minor +--- + +Exposes showTicket and showConversation methods in useIntercom hook diff --git a/README.md b/README.md index 10665a80..65616e20 100644 --- a/README.md +++ b/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 = () => { + + ); }; diff --git a/packages/react-use-intercom/README.md b/packages/react-use-intercom/README.md index 6de20b74..0492fa31 100644 --- a/packages/react-use-intercom/README.md +++ b/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 = () => { + + ); }; diff --git a/packages/react-use-intercom/src/provider.tsx b/packages/react-use-intercom/src/provider.tsx index 79bb9c91..83d8076a 100644 --- a/packages/react-use-intercom/src/provider.tsx +++ b/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(() => { 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 ( diff --git a/packages/react-use-intercom/src/types.ts b/packages/react-use-intercom/src/types.ts index c4eab801..4f6d3ce7 100644 --- a/packages/react-use-intercom/src/types.ts +++ b/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 = {