From fcef8e14e7142189fc9bc3bdb7c0c1e04f9ff928 Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Fri, 14 Oct 2022 13:44:04 -0700
Subject: [PATCH 1/3] make sure analytics is setup before calling show on
 Intercom

---
 packages/web/pages/support.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/web/pages/support.tsx b/packages/web/pages/support.tsx
index 78d295140..bd6a68a16 100644
--- a/packages/web/pages/support.tsx
+++ b/packages/web/pages/support.tsx
@@ -1,11 +1,21 @@
-import { useEffect } from 'react'
+import { useEffect, useCallback } from 'react'
 import { SettingsLayout } from '../components/templates/SettingsLayout'
+import { setupAnalytics } from '../lib/analytics'
 
 export default function Support(): JSX.Element {
-  useEffect(() => {
+  const initAnalytics = useCallback(() => {
+    setupAnalytics()
     window.Intercom('show')
   }, [])
 
+  useEffect(() => {
+    initAnalytics()
+    window.addEventListener('load', initAnalytics)
+    return () => {
+      window.removeEventListener('load', initAnalytics)
+    }
+  }, [initAnalytics])
+
   return (
     <SettingsLayout title="Support">
       <></>

From b42ef5a5bc9e8a03250d1f164e9e8bd7988a0004 Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Fri, 14 Oct 2022 14:50:00 -0700
Subject: [PATCH 2/3] only call Intercom after load event is dispatched

---
 packages/web/pages/support.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/pages/support.tsx b/packages/web/pages/support.tsx
index bd6a68a16..6a5915767 100644
--- a/packages/web/pages/support.tsx
+++ b/packages/web/pages/support.tsx
@@ -9,7 +9,6 @@ export default function Support(): JSX.Element {
   }, [])
 
   useEffect(() => {
-    initAnalytics()
     window.addEventListener('load', initAnalytics)
     return () => {
       window.removeEventListener('load', initAnalytics)

From 6a063acb23a04f6d5b95882410d5033644828cf1 Mon Sep 17 00:00:00 2001
From: Satindar Dhillon <satindar@gmail.com>
Date: Fri, 14 Oct 2022 15:01:02 -0700
Subject: [PATCH 3/3] add button to open chat in case it fails to load
 initially

---
 packages/web/pages/support.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/web/pages/support.tsx b/packages/web/pages/support.tsx
index 6a5915767..98e25f366 100644
--- a/packages/web/pages/support.tsx
+++ b/packages/web/pages/support.tsx
@@ -1,4 +1,6 @@
 import { useEffect, useCallback } from 'react'
+import { Button } from '../components/elements/Button'
+import { HStack } from '../components/elements/LayoutPrimitives'
 import { SettingsLayout } from '../components/templates/SettingsLayout'
 import { setupAnalytics } from '../lib/analytics'
 
@@ -17,7 +19,33 @@ export default function Support(): JSX.Element {
 
   return (
     <SettingsLayout title="Support">
-      <></>
+      <HStack
+        alignment="center"
+        distribution="end"
+        css={{
+          pr: '$3',
+          height: '80px',
+          'input:focus': {
+            outline: '5px auto -webkit-focus-ring-color',
+          },
+          'button:focus': {
+            outline: '5px auto -webkit-focus-ring-color',
+          },
+        }}
+      >
+        <Button
+          style={'ctaOutlineYellow'}
+          type="button"
+          onClick={(event) => {
+            event.preventDefault()
+            if (window.Intercom) {
+              window.Intercom('show')
+            }
+          }}
+        >
+          {'Open Chat Window'}
+        </Button>
+      </HStack>
     </SettingsLayout>
   )
 }