From 03c6630d83015c2fe2967a159e1b179c48ddde1a Mon Sep 17 00:00:00 2001
From: devrnt <devrient.jonas@gmail.com>
Date: Mon, 18 May 2020 22:57:03 +0200
Subject: [PATCH] chore: add page with intercom tour in playground

---
 example/app.tsx                               | 11 ++-
 example/modules/common/style.tsx              |  3 +-
 example/modules/index.ts                      |  2 +-
 example/modules/useIntercom/index.ts          |  3 +-
 example/modules/useIntercom/useIntercom.tsx   | 13 ---
 .../modules/useIntercom/useIntercomTour.tsx   | 87 +++++++++++++++++++
 6 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 example/modules/useIntercom/useIntercomTour.tsx

diff --git a/example/app.tsx b/example/app.tsx
index 57fd3e75..823a6e12 100644
--- a/example/app.tsx
+++ b/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>
diff --git a/example/modules/common/style.tsx b/example/modules/common/style.tsx
index b23751b5..d3449d56 100644
--- a/example/modules/common/style.tsx
+++ b/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 {
diff --git a/example/modules/index.ts b/example/modules/index.ts
index 991dfd01..9ae563ed 100644
--- a/example/modules/index.ts
+++ b/example/modules/index.ts
@@ -1,2 +1,2 @@
 export * from './provider';
-export { default as UseIntercomPage } from './useIntercom';
+export * from './useIntercom';
diff --git a/example/modules/useIntercom/index.ts b/example/modules/useIntercom/index.ts
index bf9c55e2..f51c1959 100644
--- a/example/modules/useIntercom/index.ts
+++ b/example/modules/useIntercom/index.ts
@@ -1 +1,2 @@
-export { default } from './useIntercom';
+export { default as UseIntercomPage } from './useIntercom';
+export { default as UseIntercomTourPage } from './useIntercomTour';
diff --git a/example/modules/useIntercom/useIntercom.tsx b/example/modules/useIntercom/useIntercom.tsx
index 66ef5934..df414fc4 100644
--- a/example/modules/useIntercom/useIntercom.tsx
+++ b/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>{' '}
diff --git a/example/modules/useIntercom/useIntercomTour.tsx b/example/modules/useIntercom/useIntercomTour.tsx
new file mode 100644
index 00000000..9cd2c78b
--- /dev/null
+++ b/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;