Merge pull request #636 from nurcinozer/feat/showSpace-method

feat: add showSpace method

Author: devrnt

.changeset/tame-chairs-build.md

@@ -0,0 +1,5 @@
+---
+'react-use-intercom': minor
+---
+
+Add "showSpace" method

README.md

@@ -140,6 +140,7 @@ Used to retrieve all methods bundled with Intercom. These are based on the offic
 | trackEvent      | (event: string, metaData?: object) => void | submits an `event` with optional `metaData`      
 | 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
 
 #### Example
 ```javascript
@@ -169,7 +170,8 @@ const HomePage = () => {
     startTour,
     trackEvent,
     showArticle,
-    startSurvey
+    startSurvey,
+    showSpace
   } = useIntercom();
 
   const bootWithProps = () => boot({ name: 'Russo' });
@@ -185,6 +187,7 @@ const HomePage = () => {
     });
   const handleShowArticle = () => showArticle(123456);
   const handleStartSurvey = () => startSurvey(123456);
+  const handleShowSpace = () => showSpace('tasks');
 
   return (
     <>
@@ -209,6 +212,7 @@ const HomePage = () => {
       </button>
       <button onClick={handleShowArticle}>Open article in Messenger</button>
       <button onClick={handleStartSurvey}>Start survey in Messenger</button>
+      <button onClick={handleShowSpace}>Open space in Messenger</button>
     </>
   );
 };

apps/playground/src/modules/useIntercom/useIntercom.tsx

@@ -38,6 +38,7 @@ const RawUseIntercomPage = () => {
     trackEvent,
     showArticle,
     startSurvey,
+    showSpace,
   } = useIntercom();
   const handleBoot = React.useCallback(() => boot(), [boot]);
 
@@ -142,6 +143,10 @@ const RawUseIntercomPage = () => {
     showArticle(4013997);
   }, [showArticle]);
 
+  const handleShowSpace = React.useCallback(() => {
+    showSpace('messages');
+  }, [showSpace]);
+
   const handleStartSurvey = () => startSurvey(29938254);
 
   return (
@@ -278,6 +283,12 @@ const RawUseIntercomPage = () => {
           onClick={handleStartSurvey}
         />
       </Item>
+      <Item>
+        <p>
+          opens the Messenger with the given <code>space</code>
+        </p>
+        <Button label="Open space" onClick={handleShowSpace} />
+      </Item>
     </Grid>
   );
 };

packages/react-use-intercom/README.md

@@ -140,6 +140,7 @@ Used to retrieve all methods bundled with Intercom. These are based on the offic
 | trackEvent      | (event: string, metaData?: object) => void | submits an `event` with optional `metaData`      
 | 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
 
 #### Example
 ```javascript
@@ -169,7 +170,8 @@ const HomePage = () => {
     startTour,
     trackEvent,
     showArticle,
-    startSurvey
+    startSurvey,
+    showSpace
   } = useIntercom();
 
   const bootWithProps = () => boot({ name: 'Russo' });
@@ -185,6 +187,7 @@ const HomePage = () => {
     });
   const handleShowArticle = () => showArticle(123456);
   const handleStartSurvey = () => startSurvey(123456);
+  const handleShowSpace = () => showSpace('tasks');
 
   return (
     <>
@@ -209,6 +212,7 @@ const HomePage = () => {
       </button>
       <button onClick={handleShowArticle}>Open article in Messenger</button>
       <button onClick={handleStartSurvey}>Start survey in Messenger</button>
+      <button onClick={handleShowSpace}>Open space in Messenger</button>
     </>
   );
 };

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

@@ -9,6 +9,7 @@ import {
   IntercomContextValues,
   IntercomProps,
   IntercomProviderProps,
+  IntercomSpace,
   RawIntercomBootProps,
 } from './types';
 import { isSSR } from './utils';
@@ -229,6 +230,14 @@ export const IntercomProvider: React.FC<
     [ensureIntercom],
   );
 
+  const showSpace = React.useCallback(
+    (spaceName: IntercomSpace) =>
+      ensureIntercom('showSpace', () => {
+        IntercomAPI('showSpace', spaceName);
+      }),
+    [ensureIntercom],
+  );
+
   const startSurvey = React.useCallback(
     (surveyId: number) => {
       ensureIntercom('startSurvey', () => {
@@ -254,6 +263,7 @@ export const IntercomProvider: React.FC<
       trackEvent,
       showArticle,
       startSurvey,
+      showSpace,
     };
   }, [
     boot,
@@ -270,6 +280,7 @@ export const IntercomProvider: React.FC<
     trackEvent,
     showArticle,
     startSurvey,
+    showSpace,
   ]);
 
   return (

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

@@ -244,7 +244,8 @@ export type IntercomMethod =
   | 'trackEvent'
   | 'getVisitorId'
   | 'startTour'
-  | 'showArticle';
+  | 'showArticle'
+  | 'showSpace';
 
 export type RawIntercomProps = RawMessengerAttributes & RawDataAttributes;
 
@@ -262,6 +263,8 @@ export type IntercomBootProps = {
 
 export type LogLevel = 'info' | 'error' | 'warn';
 
+export type IntercomSpace = 'home' | 'messages' | 'help' | 'news' | 'tasks';
+
 export type IntercomContextValues = {
   /**
    * If you'd like to control when Intercom is loaded, you can use the 'boot' method.
@@ -404,6 +407,17 @@ export type IntercomContextValues = {
    * @param surveyId The id of the survey
    */
   startSurvey: (surveyId: number) => void;
+  /**
+   *
+   * @see {@link https://developers.intercom.com/installing-intercom/docs/intercom-javascript#intercomshowspace-spacename}
+   *
+   * @remarks if a space with the given name doesn't exist, you will see a type error
+   *
+   * @param spaceName The name of the space
+   *
+   * @example showSpace('tasks')
+   */
+  showSpace: (spaceName: IntercomSpace) => void;
 };
 
 export type IntercomProviderProps = {