HelpScout suggestions

src/App.js

@@ -474,7 +474,7 @@ class App extends React.Component {
                   />
                 </div>
 
-                <HelpScoutBeacon />
+                <HelpScoutBeacon locator={locator} apps={apps} />
               </ActivityProvider>
             </FavoriteDaosProvider>
           </LocalIdentityModalProvider>

src/components/HelpScoutBeacon/HelpScoutBeacon.js

@@ -12,12 +12,14 @@ import {
   theme,
   useViewport,
 } from '@aragon/ui'
+import useBeaconSuggestions from './useBeaconSuggestions'
 import BeaconHeadScripts from './BeaconHeadScripts'
 import IconQuestion from './IconQuestion'
 import headerImg from './header.png'
 import { useClickOutside } from '../../hooks'
 import LoadingRing from '../LoadingRing'
 import { GU } from '../../utils'
+import { AppType } from '../../prop-types'
 
 const HELPSCOUT_BEACON_KEY = 'helpscout-beacon'
 const CLOSED = Symbol('closed, user can open opt-in dialogue')
@@ -26,7 +28,7 @@ const OPENING = Symbol('opening')
 const CLOSING = Symbol('closing')
 const ROUND_BUTTON_HEIGHT = 40
 
-const Beacon = React.memo(function Beacon() {
+const Beacon = React.memo(function Beacon({ locator, apps }) {
   const [beaconReady, setBeaconReady] = useState(false)
   const [openOnReady, setOpenOnReady] = useState(false)
   const [optedIn, setOptedIn] = useState(
@@ -50,6 +52,8 @@ const Beacon = React.memo(function Beacon() {
     }
   }, [openOnReady])
 
+  useBeaconSuggestions({ apps, locator, optedIn, beaconReady })
+
   return (
     <div
       css={`
@@ -78,6 +82,11 @@ const Beacon = React.memo(function Beacon() {
   )
 })
 
+Beacon.propTypes = {
+  apps: PropTypes.arrayOf(AppType),
+  locator: PropTypes.object,
+}
+
 const HelpOptIn = React.memo(function HelpOptIn({
   beaconReady,
   onOptIn,

src/components/HelpScoutBeacon/suggestions.js

@@ -0,0 +1,68 @@
+const aboutAragon = '5c98a9330428633d2cf3fd23'
+
+const suggestions = [
+  [
+    'home',
+    [
+      '5cce35302c7d3a177d6e5b78', // home
+      '5cce3c4c2c7d3a177d6e5ba2', // troubleshoot
+      '5cce34a32c7d3a177d6e5b74', // about aragon apps
+      '5cce259a2c7d3a177d6e5b33', // anatomy of association
+      aboutAragon,
+    ],
+  ],
+  [
+    'settings',
+    [
+      '5cce3bd204286306738eb793', // settings
+      aboutAragon,
+    ],
+  ],
+  [
+    'apps',
+    [
+      '5cce3baf04286306738eb792', // apps
+      aboutAragon,
+    ],
+  ],
+  [
+    'permissions',
+    [
+      '5cce3a7104286306738eb788', // permissions
+      aboutAragon,
+    ],
+  ],
+  [
+    'onboarding',
+    [
+      '5cce262f2c7d3a177d6e5b36', // prerequisites
+      '5cce28e82c7d3a177d6e5b40', // about templates
+      '5cce29a72c7d3a177d6e5b46', // create new democracy
+      '5cce2f0f2c7d3a177d6e5b5a', // creeate multisig
+      aboutAragon,
+    ],
+  ],
+  [
+    'finance',
+    [
+      '5cce39b32c7d3a177d6e5b8b', // finance
+      aboutAragon,
+    ],
+  ],
+  [
+    'token manager',
+    [
+      '5cce38892c7d3a177d6e5b84', // token manager
+      aboutAragon,
+    ],
+  ],
+  [
+    'voting',
+    [
+      '5cce393a2c7d3a177d6e5b87', // voting
+      aboutAragon,
+    ],
+  ],
+]
+
+export default suggestions

src/components/HelpScoutBeacon/useBeaconSuggestions.js

@@ -0,0 +1,53 @@
+import { useEffect, useCallback, useState } from 'react'
+import suggestions from './suggestions'
+import { staticApps } from '../../static-apps'
+
+const sectionToSuggestions = new Map(suggestions)
+
+function useBeaconSuggestions({
+  apps,
+  beaconReady,
+  locator: { instanceId, path },
+  optedIn,
+}) {
+  const [originalOptedIn] = useState(optedIn)
+  const [shouldSuggest, setShouldSuggest] = useState(false)
+  const getSection = useCallback(() => {
+    if (path === '/') {
+      return 'onboarding'
+    }
+    if (staticApps.has(instanceId)) {
+      return instanceId
+    }
+    const app = apps.find(({ proxyAddress }) => proxyAddress === instanceId)
+    if (app) {
+      return app.name.toLowerCase()
+    }
+    return null
+  }, [path, instanceId, apps])
+
+  useEffect(() => {
+    if (!shouldSuggest) {
+      return
+    }
+    window.Beacon('suggest', sectionToSuggestions.get(getSection()))
+  }, [getSection, shouldSuggest])
+
+  useEffect(() => {
+    if (!optedIn || !beaconReady) {
+      return
+    }
+    // this only happens when user opts in
+    // when opting in beaconReady is set after the open event has been triggered
+    // give it a minute before suggesting or a weird reace condition happens
+    let timeout
+    if (!originalOptedIn) {
+      timeout = setTimeout(() => setShouldSuggest(true), 1000)
+      return
+    }
+    setShouldSuggest(true)
+    return () => clearTimeout(timeout)
+  }, [optedIn, beaconReady, originalOptedIn])
+}
+
+export default useBeaconSuggestions