Merge pull request #75 from calibreapp/update-open-logic

Update Open and Loading

Author: Michael Dijkstra

README.md

@@ -1,6 +1,7 @@
 # React Live Chat Loader
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors-)
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -38,6 +39,9 @@ track how long the page has been idle for and checks if the user is on a slow
 connection (using `navigator.connection.effectiveType`) or has data-saver enabled
 (using `navigator.connection.saveData`) to prevent loading.
 
+Please note: Some chat widget providers open automatically based on the users
+interaction from their last session.
+
 ## Installation
 
 To download react-live-chat-loader run:
@@ -312,6 +316,8 @@ You can customise the Userlike Widget by passing the following props to the
 To use Chatwoot import the `LiveChatLoaderProvider` and set the `provider` prop
 as `chatwoot` and the `providerKey` prop as your Chatwoot secret.
 
+You can optionally set the `locale` and `baseUrl` props.
+
 Then import the `Chatwoot` component.
 
 ```jsx

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/components/Intercom/index.tsx

@@ -9,7 +9,7 @@ const styles: {
   close: CSSProperties
 } = {
   wrapper: {
-    zIndex: 2147483001, // 1 more than the actual widget
+    zIndex: 2147483004, // 1 more than the actual widget
     position: 'fixed',
     bottom: '20px',
     display: 'block',
@@ -137,16 +137,12 @@ const Intercom = ({ color }: Props): JSX.Element | null => {
               transform: state === 'initial' ? 'rotate(-30deg)' : 'rotate(0deg)'
             }}
           >
-            <svg
-              height="14px"
-              width="14px"
-              focusable="false"
-              aria-hidden="true"
-            >
+            <svg focusable="false" viewBox="0 0 16 14" width="28" height="25" style={{ width : '16px' }}>
               <path
                 fill="rgb(255, 255, 255)"
-                d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z"
                 fillRule="evenodd"
+                clipRule="evenodd"
+                d="M.116 4.884l1.768-1.768L8 9.232l6.116-6.116 1.768 1.768L8 12.768.116 4.884z"
               />
             </svg>
           </div>

src/components/Messenger/index.tsx

@@ -56,7 +56,7 @@ const CustomerChat = memo(
       greeting_dialog_delay: greetingDialogDelay
     }
 
-    return <div className="fb-customerchat" {...fields} />
+    return <div><div className="fb-customerchat" {...fields} /></div>
   }
 )
 

src/components/Userlike/index.tsx

@@ -7,7 +7,7 @@ const styles: {
   icon: CSSProperties
 } = {
   container: {
-    zIndex: 1,
+    zIndex: 2147483648, // one more than provider
     position: 'fixed',
     border: '0',
     width: '64px',

src/hooks/useChat.ts

@@ -11,8 +11,6 @@ const connection =
       window.navigator && (window.navigator as any).connection
     : null
 
-let scriptLoaded = false
-
 const useChat = (
   {
     loadWhenIdle
@@ -85,17 +83,9 @@ const useChat = (
         return
       }
 
-      if (state === 'opening') return
-      if (state === 'open') return chatProvider.close()
-      if (state === 'complete') return chatProvider.open()
-
-      if (!scriptLoaded) {
-        scriptLoaded = true
-        chatProvider.load({ providerKey, setState, appID, locale, baseUrl })
-      }
+      chatProvider.load({ providerKey, setState, appID, locale, baseUrl })
 
       if (open) {
-        setState('opening')
         chatProvider.open()
         setState('open')
       }

src/index.ts

@@ -1,21 +1,9 @@
-import { default as useChat } from './hooks/useChat'
-import { default as useProvider } from './hooks/useProvider'
-import { default as Drift } from './components/Drift'
-import { default as HelpScout } from './components/HelpScout'
-import { default as Intercom } from './components/Intercom'
-import { default as Messenger } from './components/Messenger'
-import { default as Userlike } from './components/Userlike'
-import { default as Chatwoot} from './components/Chatwoot'
-import { default as LiveChatLoaderProvider } from './components/LiveChatLoaderProvider'
-
-export {
-  useChat,
-  useProvider,
-  Drift,
-  HelpScout,
-  Intercom,
-  Messenger,
-  Userlike,
-  Chatwoot,
-  LiveChatLoaderProvider
-}
+export { default as useChat } from './hooks/useChat'
+export { default as useProvider } from './hooks/useProvider'
+export { default as Drift } from './components/Drift'
+export { default as HelpScout } from './components/HelpScout'
+export { default as Intercom } from './components/Intercom'
+export { default as Messenger } from './components/Messenger'
+export { default as Userlike } from './components/Userlike'
+export { default as Chatwoot } from './components/Chatwoot'
+export { default as LiveChatLoaderProvider } from './components/LiveChatLoaderProvider'

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,23 +46,35 @@ 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)
-}
 
-const open = (): void => window.$chatwoot && window.$chatwoot.toggle()
+  // 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 close = (): void => window.$chatwoot && window.$chatwoot.toggle()
+const open = (): void => {
+  window.chatwootSettings = window.chatwootSettings || {}
+  window.chatwootSettings.showPopoutButton = true
+  window.addEventListener('chatwoot:ready', function() {
+    window.$chatwoot.toggle()
+  })
+}
 
 export default {
   domain,
   load,
-  open,
-  close
+  open
 }

src/providers/drift.ts

@@ -11,18 +11,17 @@ declare global {
   }
 }
 
-const loadScript = () => {
-  if (window.drift) return
+/* eslint-disable */
+const loadScript = (): boolean => {
+  if (window.drift) return false
 
   !(function() {
     const t = (window.driftt = window.drift = window.driftt || [])
     if (!t.init) {
       if (t.invoked) {
         return void (
           window.console &&
-          //eslint-disable-next-line no-console
           console.error &&
-          //eslint-disable-next-line no-console
           console.error('Drift snippet included twice.')
         )
       }
@@ -41,22 +40,17 @@ const loadScript = () => {
           'off',
           'on'
         ]),
-        //eslint-disable-next-line @typescript-eslint/no-explicit-any
         (t.factory = function(e: any) {
           return function() {
-            //eslint-disable-next-line prefer-rest-params
             const n = Array.prototype.slice.call(arguments)
             return n.unshift(e), t.push(n), t
           }
         }),
-        //eslint-disable-next-line @typescript-eslint/no-explicit-any
         t.methods.forEach(function(e: any) {
           t[e] = t.factory(e)
         }),
-        //eslint-disable-next-line @typescript-eslint/no-explicit-any
         (t.load = function(t: any) {
           const e = 3e5,
-            //eslint-disable-next-line @typescript-eslint/no-explicit-any
             n = Math.ceil((new Date() as any) / e) * e,
             o = document.createElement('script')
           ;(o.type = 'text/javascript'),
@@ -68,38 +62,39 @@ const loadScript = () => {
         })
     }
   })()
+
+  return true
 }
-/* eslint:enable */
+/* eslint-enable */
 
 const load = ({
   providerKey,
   setState
 }: {
   providerKey: string
   setState: (state: State) => void
-}): void => {
-  loadScript()
-  window.drift.load(providerKey)
-  window.drift.SNIPPET_VERSION = '0.3.1'
-  window.drift.on('ready', () => {
-    setState('open')
-    setTimeout(() => setState('complete'), 2000)
-  })
+}): boolean => {
+  const loaded = loadScript()
+
+  // Continue as long as drift hasn’t already been initialised.
+  if (loaded) {
+    window.drift.load(providerKey)
+    window.drift.SNIPPET_VERSION = '0.3.1'
+    window.drift.on('ready', () => {
+      setState('complete')
+    })
+  }
+
+  return loaded
 }
 
 const open = (): void =>
   window.drift.on('ready', (api: { showWelcomeMessage: () => void }) =>
     api.showWelcomeMessage()
   )
 
-const close = (): void =>
-  window.drift.on('ready', (api: { hideWelcomeMessage: () => void }) =>
-    api.hideWelcomeMessage()
-  )
-
 export default {
   domain,
   load,
-  open,
-  close
+  open
 }