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.

Commit 78edcec

Browse files
SuthesanSuthesan
Suthesan
authored and
Suthesan
committed
move livechat states to context
1 parent 8d7b0ff commit 78edcec

File tree

5 files changed

+80
-75
lines changed

5 files changed

+80
-75
lines changed

‎src/components/hooks/use-livechat.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React from 'react'
1+
import { useState, useEffect } from 'react'
22
import { getClientInformation, getDomain, getUTMData, isBrowser } from 'common/utility'
33

4-
export const useLivechat = (first_load_open) => {
5-
const [is_livechat_interactive, setLiveChatInteractive] = React.useState(false)
4+
export const useLivechat = () => {
5+
const [is_loading_lc, setIsLoadingLc] = useState(false)
6+
const [first_load_open_lc, setFirstLoadOpenLc] = useState(false)
7+
const [is_livechat_interactive, setLiveChatInteractive] = useState(false)
68
const LC_API = (isBrowser() && window.LC_API) || {}
7-
const [is_logged_in, setLoggedIn] = React.useState(false)
9+
const [is_logged_in, setLoggedIn] = useState(false)
810

911
const loadLiveChatScript = (callback) => {
1012
const livechat_script = document.createElement('script')
@@ -17,9 +19,10 @@ export const useLivechat = (first_load_open) => {
1719
if (callback) callback()
1820
}
1921

20-
React.useEffect(() => {
22+
useEffect(() => {
2123
let cookie_interval = null
22-
if (isBrowser() && first_load_open) {
24+
if (isBrowser() && first_load_open_lc) {
25+
setIsLoadingLc(true)
2326
const domain = getDomain()
2427

2528
/* this function runs every second to determine logged in status*/
@@ -35,15 +38,16 @@ export const useLivechat = (first_load_open) => {
3538
window.LiveChatWidget.on('ready', () => {
3639
setLiveChatInteractive(true)
3740
window.LC_API.open_chat_window()
41+
setIsLoadingLc(false)
3842
})
3943
})
4044
}
4145

4246
return () => clearInterval(cookie_interval)
43-
}, [first_load_open])
47+
}, [first_load_open_lc])
4448

45-
React.useEffect(() => {
46-
if (isBrowser() && first_load_open) {
49+
useEffect(() => {
50+
if (isBrowser() && first_load_open_lc) {
4751
const domain = getDomain()
4852
if (is_livechat_interactive) {
4953
window.LiveChatWidget.on('ready', () => {
@@ -114,5 +118,5 @@ export const useLivechat = (first_load_open) => {
114118
}
115119
}, [is_logged_in, is_livechat_interactive])
116120

117-
return [is_livechat_interactive, LC_API]
121+
return [is_livechat_interactive, LC_API, is_loading_lc, setFirstLoadOpenLc]
118122
}

‎src/components/layout/livechat.js

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useState, useEffect, useContext } from 'react'
22
import PropTypes from 'prop-types'
33
import styled, { css } from 'styled-components'
4-
import { useLivechat } from 'components/hooks/use-livechat'
54
import LiveChatIC from 'images/svg/layout/livechat.svg'
65
import LiveChatHover from 'images/svg/layout/livechat-hover.svg'
76
import device from 'themes/device'
@@ -50,22 +49,14 @@ const StyledLiveChat = styled.div`
5049
const LiveChat = ({ is_banner_shown }) => {
5150
const url_params = new URLSearchParams((isBrowser() && window.location.search) || '')
5251
const is_livechat_query = url_params.get('is_livechat_open')
53-
const [is_loading, setIsLoading] = useState(false)
5452
const [is_livechat_hover, setLivechatHover] = useState(false)
55-
const [first_load_open, setFirstLoadOpen] = useState(false)
56-
const [is_livechat_interactive, LC_API] = useLivechat(first_load_open)
57-
const { is_eu_country } = useContext(DerivStore)
58-
59-
useEffect(() => {
60-
if (is_livechat_interactive) {
61-
setIsLoading(false)
62-
}
63-
}, [is_livechat_interactive])
53+
const { is_eu_country, is_livechat_interactive, LC_API, is_loading_lc, setFirstLoadOpenLc } =
54+
useContext(DerivStore)
6455

6556
useEffect(() => {
6657
if (is_livechat_query?.toLowerCase() === 'true') {
6758
if (is_livechat_interactive) LC_API.open_chat_window()
68-
else setFirstLoadOpen(true)
59+
else setFirstLoadOpenLc(true)
6960
}
7061
}, [])
7162

@@ -77,14 +68,13 @@ const LiveChat = ({ is_banner_shown }) => {
7768
onClick={() => {
7869
if (is_livechat_interactive) LC_API.open_chat_window()
7970
else {
80-
setFirstLoadOpen(true)
81-
setIsLoading(true)
71+
setFirstLoadOpenLc(true)
8272
}
8373
}}
8474
onMouseEnter={() => setLivechatHover(true)}
8575
onMouseLeave={() => setLivechatHover(false)}
8676
>
87-
{!is_loading ? (
77+
{!is_loading_lc ? (
8878
<img
8979
src={is_livechat_hover ? LiveChatHover : LiveChatIC}
9080
width="32"

‎src/pages/livechat/index.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React, { useEffect, useState } from 'react'
1+
import React, { useEffect, useState, useContext } from 'react'
22
import styled from 'styled-components'
33
import Layout from 'components/layout/layout'
44
import InitialLoader from 'components/elements/dot-loader'
55
import { localize, WithIntl } from 'components/localization'
66
import { SEO, Container, Show } from 'components/containers'
7-
import { useLivechat } from 'components/hooks/use-livechat'
7+
import { DerivStore } from 'store'
88

99
const StyledContainer = styled(Container)`
1010
text-align: center;
@@ -24,15 +24,14 @@ const CoverMinimizeButton = styled.div`
2424
`
2525

2626
const LiveChatPage = () => {
27-
const [firstLoadOpen, setFirstLoadOpen] = useState(false)
28-
const [is_livechat_interactive, LC_API] = useLivechat(firstLoadOpen)
27+
const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)
2928
const [loading, setLoading] = useState(true)
3029

3130
useEffect(() => {
3231
if (is_livechat_interactive) {
3332
LC_API.open_chat_window()
3433
setLoading(false)
35-
} else setFirstLoadOpen(true)
34+
} else setFirstLoadOpenLc(true)
3635
}, [is_livechat_interactive])
3736

3837
return (

‎src/pages/regulatory/_financial_commission.js

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,68 @@
1-
import React from 'react'
1+
import React, { useContext } from 'react'
22
import styled from 'styled-components'
3+
import { DerivStore } from '../../store'
34
import { Text, LinkText } from 'components/elements'
45
import { deriv_app_url } from 'common/constants'
56
import { Show } from 'components/containers'
6-
import { useLivechat } from 'components/hooks/use-livechat'
77
import { Localize } from 'components/localization'
88

99
const TextLink = styled(LinkText).attrs({ as: 'span' })``
1010

1111
const FinancialCommission = () => {
12-
const [is_livechat_interactive, LC_API] = useLivechat()
12+
const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)
1313

1414
return (
1515
<>
16-
{is_livechat_interactive && (
17-
<div>
18-
<Show.Eu>
19-
<Text mt="2rem" max_width="58.8rem">
20-
<Localize
21-
translate_text="For fair resolution of any complaints, please <0>chat</0> with us. To learn more, see our <1>complaint policy</1>."
22-
components={[
23-
<TextLink
24-
key={0}
25-
color="red"
26-
className="gtm-deriv-livechat"
27-
onClick={() => {
16+
<div>
17+
<Show.Eu>
18+
<Text mt="2rem" max_width="58.8rem">
19+
<Localize
20+
translate_text="For fair resolution of any complaints, please <0>chat</0> with us. To learn more, see our <1>complaint policy</1>."
21+
components={[
22+
<TextLink
23+
key={0}
24+
color="red"
25+
className="gtm-deriv-livechat"
26+
onClick={() => {
27+
if (is_livechat_interactive) {
2828
LC_API.open_chat_window()
29-
}}
30-
/>,
31-
<LinkText
32-
key={0}
33-
color="red"
34-
target="_blank"
35-
rel="noopener noreferrer"
36-
href={`${deriv_app_url}/complaints-policy`}
37-
/>,
38-
]}
39-
/>
40-
</Text>
41-
</Show.Eu>
42-
<Show.NonEU>
43-
<Text mt="2rem" max_width="58.8rem">
44-
<Localize
45-
translate_text="For fair resolution of any complaints, please <0>chat</0> with us."
46-
components={[
47-
<TextLink
48-
key={0}
49-
color="red"
50-
onClick={() => {
29+
} else {
30+
setFirstLoadOpenLc(true)
31+
}
32+
}}
33+
/>,
34+
<LinkText
35+
key={0}
36+
color="red"
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
href={`${deriv_app_url}/complaints-policy`}
40+
/>,
41+
]}
42+
/>
43+
</Text>
44+
</Show.Eu>
45+
<Show.NonEU>
46+
<Text mt="2rem" max_width="58.8rem">
47+
<Localize
48+
translate_text="For fair resolution of any complaints, please <0>chat</0> with us."
49+
components={[
50+
<TextLink
51+
key={0}
52+
color="red"
53+
onClick={() => {
54+
if (is_livechat_interactive) {
5155
LC_API.open_chat_window()
52-
}}
53-
/>,
54-
]}
55-
/>
56-
</Text>
57-
</Show.NonEU>
58-
</div>
59-
)}
56+
} else {
57+
setFirstLoadOpenLc(true)
58+
}
59+
}}
60+
/>,
61+
]}
62+
/>
63+
</Text>
64+
</Show.NonEU>
65+
</div>
6066
</>
6167
)
6268
}

‎src/store/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from 'react'
22
import { useWebsiteStatus } from 'components/hooks/use-website-status'
3+
import { useLivechat } from 'components/hooks/use-livechat'
34
import { isEuCountry, isP2PAllowedCountry, isUK } from 'common/country-base'
45

56
type DerivProviderProps = {
@@ -15,6 +16,7 @@ export const DerivProvider = ({ children }: DerivProviderProps) => {
1516
const [is_p2p_allowed_country, setP2PAllowedCountry] = useState(false)
1617
const [crypto_config, setCryptoConfig] = useState(null)
1718
const [user_country, setUserCountry] = useState(null)
19+
const [is_livechat_interactive, LC_API, is_loading_lc, setFirstLoadOpenLc] = useLivechat()
1820

1921
useEffect(() => {
2022
if (website_status) {
@@ -39,6 +41,10 @@ export const DerivProvider = ({ children }: DerivProviderProps) => {
3941
website_status_loading,
4042
setWebsiteStatus,
4143
user_country,
44+
is_livechat_interactive,
45+
LC_API,
46+
is_loading_lc,
47+
setFirstLoadOpenLc,
4248
}}
4349
>
4450
{children}

0 commit comments

Comments
 (0)