Update Chatwoot open logic

Author: Michael Dijkstra

src/components/Chatwoot/index.tsx

@@ -4,6 +4,7 @@ import React, { CSSProperties } from 'react'
 const styles: {
   button: CSSProperties
   img: CSSProperties
+  close: CSSProperties
 } = {
   button: {
     borderRadius: '100px',
@@ -14,13 +15,21 @@ const styles: {
     height: '64px',
     position: 'fixed',
     width: '64px',
-    zIndex: 2147483001,
+    zIndex: 2147483001, // 1 more than the actual widget
     userSelect: 'none'
   },
   img: {
     height: '24px',
     margin: '20px',
     width: '24px'
+  },
+  close: {
+    backgroundColor: "#fff",
+    height: "24px",
+    left: "32px",
+    position: "absolute",
+    top: "20px",
+    width: "2px",
   }
 }
 
@@ -43,11 +52,18 @@ const Provider = ({ color }: Props): JSX.Element | null => {
           backgroundColor: color
         }}
       >
-        <img
-          style={styles.img}
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg=="
-          alt="bubble-icon"
-        />
+        {state === 'initial' ? (
+          <img
+            style={styles.img}
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAAwgJEBk0TVheY2R5eo+ut8jb5OXs8fX2+cjRDTIAAADsSURBVHgBldZbkoMgFIThRgQv8SKKgGf/C51UnJqaRI30/9zfe+NQUQ3TvG7bOk9DVeCmshmj/CuOTYnrdBfkUOg0zlOtl9OWVuEk4+QyZ3DIevmSt/ioTvK1VH/s5bY3YdM9SBZ/mUUyWgx+U06ycgp7D8msxSvtc4HXL9BLdj2elSEfhBJAI0QNgJEBI1BEBsQClVBVGDgwYOLAhJkDM1YOrNg4sLFAsLJgZsHEgoEFFQt0JAFGFjQsKAMJ0LFAexKgZYFyJIDxJIBNJEDNAtSJBLCeBDCOBFAPzwFA94ED+zmhwDO9358r8ANtIsMXi7qVAwAAAABJRU5ErkJggg=="
+            alt="bubble-icon"
+          />
+        ) : (
+          <>
+            <div style={{ ...styles.close, transform: "rotate(45deg)" }} />
+            <div style={{ ...styles.close, transform: "rotate(-45deg)" }} />
+          </>
+        )}
       </div>
     </div>
   )

src/providers/chatwoot.ts

@@ -1,4 +1,5 @@
 import { State } from 'types'
+import waitForLoad from '../utils/waitForLoad'
 
 const domain = 'https://app.chatwoot.com'
 
@@ -21,15 +22,16 @@ declare global {
 }
 
 /* eslint-disable */
-const loadScript = (onload: () => void, baseUrl: string): void => {
-  if (window.$chatwoot) return
+const loadScript = (onload: () => void, baseUrl: string): boolean => {
+  if (window.$chatwoot) return false
   ;(function(d, t) {
     var script: HTMLScriptElement = d.createElement('script')
     var fisrtScript = d.getElementsByTagName('script')[0]
     script.src = baseUrl + '/packs/js/sdk.js'
     fisrtScript.parentNode?.insertBefore(script, fisrtScript)
     script.onload = onload
   })(document)
+  return true
 }
 /* eslint-enable */
 
@@ -44,17 +46,28 @@ const load = ({
   setState: (state: State) => void
   baseUrl?: string
 }): void => {
-  loadScript(function() {
+  const loaded = loadScript(function() {
     setTimeout(() => setState('complete'), 1000)
     window.chatwootSDK.run({
       websiteToken: providerKey,
       baseUrl,
       locale
     })
   }, baseUrl)
+
+  // Continue as long as userlike hasn’t already been initialised.
+  if (loaded) {
+    waitForLoad(
+      () => !!window.$chatwoot?.hasLoaded,
+      // Allow chatwoot to complete loading before removing fake widget
+      () => setTimeout(() => setState('complete'), 2000)
+    )
+  }
 }
 
 const open = (): void => {
+  window.chatwootSettings = window.chatwootSettings || {}
+  window.chatwootSettings.showPopoutButton = true
   window.addEventListener('chatwoot:ready', function() {
     window.$chatwoot.toggle()
   })