Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Niloofar Sadeghi / Improve live chat performance #2479

Merged
merged 2 commits into from
Jan 11, 2022
Merged

Niloofar Sadeghi / Improve live chat performance #2479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76baa22
improve livechat performance
Jan 9, 2022
a09eea7
address comments
Jan 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 10 additions & 26 deletions src/components/hooks/use-livechat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import React from 'react'
import { getClientInformation, getDomain, getUTMData, isBrowser } from 'common/utility'

export const useLivechat = () => {
export const useLivechat = (first_load_open) => {
const [is_livechat_interactive, setLiveChatInteractive] = React.useState(false)
const LC_API = (isBrowser() && window.LC_API) || {}
const [is_logged_in, setLoggedIn] = React.useState(false)

const url_params = new URLSearchParams((isBrowser() && window.location.search) || '')
const is_livechat_query = url_params.get('is_livechat_open')

const loadLiveChatScript = (callback) => {
const livechat_script = document.createElement('script')
livechat_script.innerHTML = `
Expand All @@ -22,8 +19,7 @@ export const useLivechat = () => {

React.useEffect(() => {
let cookie_interval = null
let script_timeout = null
if (isBrowser()) {
if (isBrowser() && first_load_open) {
const domain = getDomain()

/* this function runs every second to determine logged in status*/
Expand All @@ -35,34 +31,22 @@ export const useLivechat = () => {
})()
cookie_interval = setInterval(checkCookie, 1000)

// The purpose is to load the script after everything is load but not async or defer. Therefore, it will be ignored in the rendering timeline
script_timeout = setTimeout(() => {
loadLiveChatScript(() => {
window.LiveChatWidget.on('ready', () => {
setLiveChatInteractive(true)
if (is_livechat_query?.toLowerCase() === 'true') {
window.LC_API.open_chat_window()
}
})
loadLiveChatScript(() => {
window.LiveChatWidget.on('ready', () => {
setLiveChatInteractive(true)
window.LC_API.open_chat_window()
})
}, 2000)
})
}

return () => {
clearInterval(cookie_interval)
clearTimeout(script_timeout)
}
}, [])
return () => clearInterval(cookie_interval)
}, [first_load_open])

React.useEffect(() => {
if (isBrowser()) {
if (isBrowser() && first_load_open) {
const domain = getDomain()
if (is_livechat_interactive) {
window.LiveChatWidget.on('ready', () => {
// we open and close the window to trigger the widget to listen for new events
window.LC_API.open_chat_window()
window.LC_API.hide_chat_window()

const utm_data = getUTMData(domain)
const client_information = getClientInformation(domain)
const url_params = new URLSearchParams(window.location.search)
Expand Down
71 changes: 49 additions & 22 deletions src/components/layout/livechat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import React, { useState } from 'react'
import React, { useState, useEffect, useContext } from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'
import { useLivechat } from 'components/hooks/use-livechat'
import LiveChatIC from 'images/svg/layout/livechat.svg'
import LiveChatHover from 'images/svg/layout/livechat-hover.svg'
import device from 'themes/device'
import { DerivStore } from 'store'
import { isBrowser } from 'common/utility'
import InitialLoader from 'components/elements/dot-loader'

const StyledLiveChat = styled.div`
position: fixed;
Expand Down Expand Up @@ -46,32 +48,57 @@ const StyledLiveChat = styled.div`
`

const LiveChat = ({ is_banner_shown }) => {
const url_params = new URLSearchParams((isBrowser() && window.location.search) || '')
const is_livechat_query = url_params.get('is_livechat_open')
const [is_loading, setIsLoading] = useState(false)
const [is_livechat_hover, setLivechatHover] = useState(false)
const [is_livechat_interactive, LC_API] = useLivechat()
const { is_eu_country } = React.useContext(DerivStore)
const [first_load_open, setFirstLoadOpen] = useState(false)
const [is_livechat_interactive, LC_API] = useLivechat(first_load_open)
const { is_eu_country } = useContext(DerivStore)

useEffect(() => {
if (is_livechat_interactive) {
setIsLoading(false)
}
}, [is_livechat_interactive])

useEffect(() => {
if (is_livechat_query?.toLowerCase() === 'true') {
if (is_livechat_interactive) LC_API.open_chat_window()
else setFirstLoadOpen(true)
}
}, [])

return (
<>
{is_livechat_interactive && (
<StyledLiveChat
className="gtm-deriv-livechat"
is_banner_shown={is_banner_shown}
is_eu_country={is_eu_country}
onClick={() => {
LC_API.open_chat_window()
}}
onMouseEnter={() => setLivechatHover(true)}
onMouseLeave={() => setLivechatHover(false)}
>
<img
src={is_livechat_hover ? LiveChatHover : LiveChatIC}
width="32"
height="32"
alt="livechat icon"
<StyledLiveChat
className="gtm-deriv-livechat"
is_banner_shown={is_banner_shown}
is_eu_country={is_eu_country}
onClick={() => {
if (is_livechat_interactive) LC_API.open_chat_window()
else {
setFirstLoadOpen(true)
setIsLoading(true)
}
}}
onMouseEnter={() => setLivechatHover(true)}
onMouseLeave={() => setLivechatHover(false)}
>
{!is_loading ? (
<img
src={is_livechat_hover ? LiveChatHover : LiveChatIC}
width="32"
height="32"
alt="livechat icon"
/>
) : (
<div style={{ width: '32px', height: '32px' }}>
<InitialLoader
style={{ position: 'absolute', marginTop: '-28px', marginLeft: '-5px' }}
/>
</StyledLiveChat>
</div>
)}
</>
</StyledLiveChat>
)
}

Expand Down
18 changes: 5 additions & 13 deletions src/pages/livechat/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,15 @@ const CoverMinimizeButton = styled.div`
`

const LiveChatPage = () => {
const [is_livechat_interactive, LC_API] = useLivechat()
const [firstLoadOpen, setFirstLoadOpen] = useState(false)
const [is_livechat_interactive, LC_API] = useLivechat(firstLoadOpen)
const [loading, setLoading] = useState(true)

useEffect(() => {
// The reason for this timeout is to help delay before calling LC_API.open_chat_window() function,
// so that it only call the function if Live Chat is fully loaded.
let script_timeout = null
if (is_livechat_interactive) {
script_timeout = setTimeout(() => {
LC_API.open_chat_window()
setLoading(false)
}, 1000)
}

return () => {
clearTimeout(script_timeout)
}
LC_API.open_chat_window()
setLoading(false)
} else setFirstLoadOpen(true)
}, [is_livechat_interactive])

return (
Expand Down