Feature #169: Intercom (#301)

* Implements intercom
Adds REACT_APP_INTERCOM_ID_MAINNET and REACT_APP_INTERCOM_ID_RINKEBY env vars

* Adds .env.example

* Adds intercom env vars

* Updates env vars
Replaces "rinkeby" and "mainnet" with "non-production" and "production"

* Now loads intercom after the user accepted the analytics

* Add env variable for production intercom id

* Update .env.example

* Removes react-intercom
Fixs getIntercomId with default dev appID
Now loads intercom as script

* Renegerate flow-types

.env.example

@@ -0,0 +1,11 @@
+# You can leave this empty for rinkeby or use "mainnet"
+REACT_APP_NETWORK=
+
+# For Rinkeby network
+REACT_APP_GOOGLE_ANALYTICS_ID_RINKEBY=
+
+# For Mainnet network (no needed on dev mode)
+REACT_APP_GOOGLE_ANALYTICS_ID_MAINNET=
+
+# For production environments
+REACT_APP_INTERCOM_ID=

src/components/CookiesBanner/index.jsx

@@ -14,6 +14,7 @@ import { COOKIES_KEY } from '~/logic/cookies/model/cookie'
 import { loadFromCookie, saveCookie } from '~/logic/cookies/utils'
 import { cookieBannerOpen } from '~/logic/cookies/store/selectors'
 import { openCookieBanner } from '~/logic/cookies/store/actions/openCookieBanner'
+import { loadIntercom } from '~/utils/intercom'
 
 const useStyles = makeStyles({
   container: {
@@ -72,6 +73,8 @@ const useStyles = makeStyles({
 const CookiesBanner = () => {
   const classes = useStyles()
   const dispatch = useDispatch()
+
+  const [showAnalytics, setShowAnalytics] = useState(false)
   const [localNecessary, setLocalNecessary] = useState(true)
   const [localAnalytics, setLocalAnalytics] = useState(false)
   const showBanner = useSelector(cookieBannerOpen)
@@ -85,6 +88,7 @@ const CookiesBanner = () => {
         setLocalNecessary(acceptedNecessary)
         const openBanner = acceptedNecessary === false || showBanner
         dispatch(openCookieBanner(openBanner))
+        setShowAnalytics(acceptedAnalytics)
       } else {
         dispatch(openCookieBanner(true))
       }
@@ -99,6 +103,7 @@ const CookiesBanner = () => {
     }
     await saveCookie(COOKIES_KEY, newState, 365)
     dispatch(openCookieBanner(false))
+    setShowAnalytics(true)
   }
 
   const closeCookiesBannerHandler = async () => {
@@ -108,21 +113,21 @@ const CookiesBanner = () => {
     }
     const expDays = localAnalytics ? 365 : 7
     await saveCookie(COOKIES_KEY, newState, expDays)
+    setShowAnalytics(localAnalytics)
     dispatch(openCookieBanner(false))
   }
 
-
-  return showBanner ? (
+  const cookieBannerContent = (
     <div className={classes.container}>
       <IconButton onClick={() => closeCookiesBannerHandler()} className={classes.close}><Close /></IconButton>
       <div className={classes.content}>
         <p className={classes.text}>
-      We use cookies to give you the best experience and to help improve our website. Please read our
+          We use cookies to give you the best experience and to help improve our website. Please read our
           {' '}
           <Link className={classes.link} to="https://safe.gnosis.io/cookie">Cookie Policy</Link>
           {' '}
-      for more information. By clicking &quot;Accept all&quot;, you agree to the storing of cookies on your device
-      to enhance site navigation, analyze site usage and provide customer support.
+          for more information. By clicking &quot;Accept all&quot;, you agree to the storing of cookies on your device
+          to enhance site navigation, analyze site usage and provide customer support.
         </p>
         <div className={classes.form}>
           <div className={classes.formItem}>
@@ -163,7 +168,13 @@ const CookiesBanner = () => {
         </div>
       </div>
     </div>
-  ) : null
+  )
+
+  if (showAnalytics) {
+    loadIntercom()
+  }
+
+  return showBanner ? cookieBannerContent : null
 }
 
 export default CookiesBanner

src/config/index.js

@@ -45,3 +45,5 @@ export const signaturesViaMetamask = () => {
 
   return config[SIGNATURES_VIA_METAMASK]
 }
+
+export const getIntercomId = () => (process.env.REACT_APP_ENV === 'production' ? process.env.REACT_APP_INTERCOM_ID : 'plssl1fl')

src/utils/intercom.js

@@ -0,0 +1,25 @@
+// @flow
+import { getIntercomId } from '~/config'
+
+// eslint-disable-next-line consistent-return
+export const loadIntercom = () => {
+  const APP_ID = getIntercomId()
+  if (!APP_ID) {
+    console.error('[Intercom] - In order to use Intercom you need to add an appID')
+    return null
+  }
+  const d = document
+  const s = d.createElement('script')
+  s.type = 'text/javascript'
+  s.async = true
+  s.src = `https://widget.intercom.io/widget/${APP_ID}`
+  const x = d.getElementsByTagName('script')[0]
+  x.parentNode.insertBefore(s, x)
+
+  s.onload = () => {
+    window.Intercom('boot', {
+      app_id: APP_ID,
+      consent: true,
+    })
+  }
+}

yarn.lock

@@ -14756,6 +14756,13 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
+prop-types@15.5.8:
+  version "15.5.8"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
+  integrity sha1-a3suFBCDvjjIWVqlH8VXdccZk5Q=
+  dependencies:
+    fbjs "^0.8.9"
+
 prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -15243,6 +15250,13 @@ react-inspector@^3.0.2:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
+react-intercom@^1.0.15:
+  version "1.0.15"
+  resolved "https://registry.yarnpkg.com/react-intercom/-/react-intercom-1.0.15.tgz#29180aca961a319eaab88a66126e484e1abd428b"
+  integrity sha512-e4NhmearKjdxmu6EjiA0d29FqEXJUvWtyxo4ioipNsKBD7gZgvtyJMty9UhNRSf9RoPqtSX2Fw4ooy6Ld86ddw==
+  dependencies:
+    prop-types "15.5.8"
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"