docs: add start tour in example playground

example/app.tsx

@@ -2,7 +2,12 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { HashRouter as Router, Route, NavLink } from 'react-router-dom';
 
-import { ProviderPage, UseIntercomPage, ProviderEventsPage } from './modules';
+import {
+  ProviderPage,
+  UseIntercomPage,
+  ProviderEventsPage,
+  UseIntercomTourPage,
+} from './modules';
 
 import { Page, Style } from './modules/common';
 
@@ -39,6 +44,7 @@ const App = () => {
           <Route path="/provider" component={ProviderPage} />
           <Route path="/providerEvents" component={ProviderEventsPage} />
           <Route path="/useIntercom" component={UseIntercomPage} />
+          <Route path="/useIntercomTour" component={UseIntercomTourPage} />
           <Route path="/" exact>
             <Navigation>
               <Link to="/provider">
@@ -50,6 +56,9 @@ const App = () => {
               <Link to="/useIntercom">
                 <code>useIntercom</code>
               </Link>
+              <Link to="/useIntercomTour">
+                <code>useIntercom with tour</code>
+              </Link>
             </Navigation>
           </Route>
         </Router>

example/modules/common/style.tsx

@@ -21,7 +21,8 @@ const GlobalStyle = createGlobalStyle`
   h5,
   h6,
   p {
-    color: var(--dark)
+    color: var(--dark);
+    line-height: 1.75rem;
   }
 
   body {

example/modules/index.ts

@@ -1,2 +1,2 @@
 export * from './provider';
-export { default as UseIntercomPage } from './useIntercom';
+export * from './useIntercom';

example/modules/useIntercom/index.ts

@@ -1 +1,2 @@
-export { default } from './useIntercom';
+export { default as UseIntercomPage } from './useIntercom';
+export { default as UseIntercomTourPage } from './useIntercomTour';

example/modules/useIntercom/useIntercom.tsx

@@ -58,11 +58,6 @@ const RawUseIntercomPage = () => {
     setVisitorId(id);
   }, [getVisitorId]);
 
-  // TODO: check if example site is deployed
-  const handleStartTour = React.useCallback(() => {
-    startTour(9665679);
-  }, [startTour]);
-
   const handleTrackEvent = React.useCallback(() => {
     trackEvent('invited-friend');
   }, [trackEvent]);
@@ -161,14 +156,6 @@ const RawUseIntercomPage = () => {
           onClick={handleGetVisitorId}
         />
       </Item>
-      <Item>
-        <p>
-          starts a tour based on the <code>tourId</code>
-        </p>
-        <Button label="Start tour" onClick={handleStartTour}>
-          Start tour
-        </Button>
-      </Item>
       <Item>
         <p>
           submits an <code>event</code>{' '}

example/modules/useIntercom/useIntercomTour.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { IntercomProvider, useIntercom } from '../../../dist';
+
+import { Button } from '../common';
+
+const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  width: 100%;
+`;
+
+const Item = styled.div`
+  display: grid;
+  grid-template-rows: min-content;
+
+  &::after {
+    content: '';
+    margin: 2rem 0 1.5rem;
+    border-bottom: 2px solid var(--grey);
+    width: 100%;
+  }
+`;
+
+const RawUseIntercomStartPagePage = () => {
+  const { boot, shutdown, hardShutdown, startTour } = useIntercom();
+
+  const handleBoot = React.useCallback(() => boot({ name: 'Russo' }), [boot]);
+
+  const handleStartTour = React.useCallback(() => {
+    // TODO: update tour id
+    startTour(122198);
+  }, [startTour]);
+
+  return (
+    <Grid>
+      <Item>
+        <p>
+          starts a tour based on the <code>tourId</code>
+        </p>
+        <Button label="Start tour" onClick={handleStartTour}>
+          Start tour
+        </Button>
+      </Item>
+      <Item>
+        <p>
+          boots the Intercom instance, not needed if <code>autoBoot</code> in{' '}
+          <code>IntercomProvider</code> is <code>true</code>
+        </p>
+        <Button label="Boot" data-cy="boot" onClick={boot} />
+      </Item>
+      <Item>
+        <p>
+          boots the Intercom instance with given <code>props</code>
+        </p>
+        <Button label="Boot props" data-cy="boot-seeded" onClick={handleBoot} />
+      </Item>
+      <Item>
+        <p>shuts down the Intercom instance</p>
+        <Button label="Shutdown" data-cy="shutdown" onClick={shutdown} />
+      </Item>
+      <Item>
+        <p>
+          same functionality as <code>shutdown</code>, but makes sure the
+          Intercom cookies, <code>window.Intercom</code> and{' '}
+          <code>window.intercomSettings</code> are removed
+        </p>
+        <Button
+          label="Shutdown hard"
+          data-cy="shutdown-hard"
+          onClick={hardShutdown}
+        />
+      </Item>
+    </Grid>
+  );
+};
+
+const UseIntercomTourPage = () => {
+  return (
+    <IntercomProvider appId="jcabc7e3" autoBoot>
+      <RawUseIntercomStartPagePage />
+    </IntercomProvider>
+  );
+};
+
+export default UseIntercomTourPage;