diff --git a/src/components/hooks/use-livechat.js b/src/components/hooks/use-livechat.js
index 5a96f0f84e6..6afd20a9129 100644
--- a/src/components/hooks/use-livechat.js
+++ b/src/components/hooks/use-livechat.js
@@ -1,10 +1,12 @@
-import React from 'react'
+import { useState, useEffect } from 'react'
import { getClientInformation, getDomain, getUTMData, isBrowser } from 'common/utility'
-export const useLivechat = (first_load_open) => {
- const [is_livechat_interactive, setLiveChatInteractive] = React.useState(false)
+export const useLivechat = () => {
+ const [is_loading_lc, setLoadingLc] = useState(false)
+ const [first_load_open_lc, setFirstLoadOpenLc] = useState(false)
+ const [is_livechat_interactive, setLiveChatInteractive] = useState(false)
const LC_API = (isBrowser() && window.LC_API) || {}
- const [is_logged_in, setLoggedIn] = React.useState(false)
+ const [is_logged_in, setLoggedIn] = useState(false)
const loadLiveChatScript = (callback) => {
const livechat_script = document.createElement('script')
@@ -17,9 +19,10 @@ export const useLivechat = (first_load_open) => {
if (callback) callback()
}
- React.useEffect(() => {
+ useEffect(() => {
let cookie_interval = null
- if (isBrowser() && first_load_open) {
+ if (isBrowser() && first_load_open_lc) {
+ setLoadingLc(true)
const domain = getDomain()
/* this function runs every second to determine logged in status*/
@@ -35,15 +38,16 @@ export const useLivechat = (first_load_open) => {
window.LiveChatWidget.on('ready', () => {
setLiveChatInteractive(true)
window.LC_API.open_chat_window()
+ setLoadingLc(false)
})
})
}
return () => clearInterval(cookie_interval)
- }, [first_load_open])
+ }, [first_load_open_lc])
- React.useEffect(() => {
- if (isBrowser() && first_load_open) {
+ useEffect(() => {
+ if (isBrowser() && first_load_open_lc) {
const domain = getDomain()
if (is_livechat_interactive) {
window.LiveChatWidget.on('ready', () => {
@@ -114,5 +118,5 @@ export const useLivechat = (first_load_open) => {
}
}, [is_logged_in, is_livechat_interactive])
- return [is_livechat_interactive, LC_API]
+ return [is_livechat_interactive, LC_API, is_loading_lc, setFirstLoadOpenLc]
}
diff --git a/src/components/layout/livechat.js b/src/components/layout/livechat.js
index 1214cfaa962..dfa723d337f 100644
--- a/src/components/layout/livechat.js
+++ b/src/components/layout/livechat.js
@@ -1,7 +1,6 @@
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'
@@ -50,22 +49,14 @@ 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 [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])
+ const { is_eu_country, is_livechat_interactive, LC_API, is_loading_lc, setFirstLoadOpenLc } =
+ useContext(DerivStore)
useEffect(() => {
if (is_livechat_query?.toLowerCase() === 'true') {
if (is_livechat_interactive) LC_API.open_chat_window()
- else setFirstLoadOpen(true)
+ else setFirstLoadOpenLc(true)
}
}, [])
@@ -77,14 +68,13 @@ const LiveChat = ({ is_banner_shown }) => {
onClick={() => {
if (is_livechat_interactive) LC_API.open_chat_window()
else {
- setFirstLoadOpen(true)
- setIsLoading(true)
+ setFirstLoadOpenLc(true)
}
}}
onMouseEnter={() => setLivechatHover(true)}
onMouseLeave={() => setLivechatHover(false)}
>
- {!is_loading ? (
+ {!is_loading_lc ? (
{
- const [is_livechat_interactive, LC_API] = useLivechat()
+ const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)
return (
@@ -50,18 +50,20 @@ export const DidntFindYourAnswerBanner = () => {
{localize('Didn’t find your answer? We can help.')}
- {is_livechat_interactive && (
-
)
diff --git a/src/pages/livechat/index.js b/src/pages/livechat/index.js
index b56b5b15eab..25538b25de4 100644
--- a/src/pages/livechat/index.js
+++ b/src/pages/livechat/index.js
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
import styled from 'styled-components'
import Layout from 'components/layout/layout'
import InitialLoader from 'components/elements/dot-loader'
import { localize, WithIntl } from 'components/localization'
import { SEO, Container, Show } from 'components/containers'
-import { useLivechat } from 'components/hooks/use-livechat'
+import { DerivStore } from 'store'
const StyledContainer = styled(Container)`
text-align: center;
@@ -24,15 +24,14 @@ const CoverMinimizeButton = styled.div`
`
const LiveChatPage = () => {
- const [firstLoadOpen, setFirstLoadOpen] = useState(false)
- const [is_livechat_interactive, LC_API] = useLivechat(firstLoadOpen)
+ const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)
const [loading, setLoading] = useState(true)
useEffect(() => {
if (is_livechat_interactive) {
LC_API.open_chat_window()
setLoading(false)
- } else setFirstLoadOpen(true)
+ } else setFirstLoadOpenLc(true)
}, [is_livechat_interactive])
return (
diff --git a/src/pages/partners/payment-agent/_faq-data.js b/src/pages/partners/payment-agent/_faq-data.js
index 363a7275865..d6ef02ef6ed 100644
--- a/src/pages/partners/payment-agent/_faq-data.js
+++ b/src/pages/partners/payment-agent/_faq-data.js
@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { useContext } from 'react'
import styled from 'styled-components'
import { HeaderPrimary, TextPrimary, LocalizedLinkText } from '../affiliate-ib/_faq-data'
import { Header, LinkText } from 'components/elements'
import { localize, Localize } from 'components/localization'
+import { DerivStore } from 'store'
const TextLink = styled(LinkText).attrs({ as: 'span' })``
@@ -58,53 +59,60 @@ const General = () => (
)
-const AccountManagement = () => (
- <>
-
- {localize('How can I add, remove or change my accepted payment methods?')}
-
-
- {
- // eslint-disable-next-line no-undef
- LC_API.open_chat_window()
- }}
- />,
- ]}
- />
-
-
- {localize('As a payment agent, will I receive commissions from Deriv?')}
-
-
- {localize(
- 'We do not pay commissions to payment agents. You set your own commission rate per transaction and our clients will bear the necessary fees.',
- )}
-
-
- {localize('Can I advertise my services to Deriv clients?')}
-
-
- ]}
- />
-
-
- {localize(
- 'Will I still be able to trade with my account after registering as a payment agent?',
- )}
-
-
- {localize(
- 'Yes. As a payment agent, you will still be able to trade with your account.',
- )}
-
-
-)
+const AccountManagement = () => {
+ const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)
+
+ return (
+ <>
+
+ {localize('How can I add, remove or change my accepted payment methods?')}
+
+
+ {
+ if (is_livechat_interactive) {
+ LC_API.open_chat_window()
+ } else {
+ setFirstLoadOpenLc(true)
+ }
+ }}
+ />,
+ ]}
+ />
+
+
+ {localize('As a payment agent, will I receive commissions from Deriv?')}
+
+
+ {localize(
+ 'We do not pay commissions to payment agents. You set your own commission rate per transaction and our clients will bear the necessary fees.',
+ )}
+
+
+ {localize('Can I advertise my services to Deriv clients?')}
+
+
+ ]}
+ />
+
+
+ {localize(
+ 'Will I still be able to trade with my account after registering as a payment agent?',
+ )}
+
+
+ {localize(
+ 'Yes. As a payment agent, you will still be able to trade with your account.',
+ )}
+
+
+ )
+}
export { General, AccountManagement }
diff --git a/src/pages/regulatory/_financial_commission.js b/src/pages/regulatory/_financial_commission.js
index 90b0a771a01..e8518ab7ab9 100644
--- a/src/pages/regulatory/_financial_commission.js
+++ b/src/pages/regulatory/_financial_commission.js
@@ -1,62 +1,68 @@
-import React from 'react'
+import React, { useContext } from 'react'
import styled from 'styled-components'
+import { DerivStore } from '../../store'
import { Text, LinkText } from 'components/elements'
import { deriv_app_url } from 'common/constants'
import { Show } from 'components/containers'
-import { useLivechat } from 'components/hooks/use-livechat'
import { Localize } from 'components/localization'
const TextLink = styled(LinkText).attrs({ as: 'span' })``
const FinancialCommission = () => {
- const [is_livechat_interactive, LC_API] = useLivechat()
+ const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)
+
+ const handleLcOpen = () => {
+ if (is_livechat_interactive) {
+ LC_API.open_chat_window()
+ } else {
+ setFirstLoadOpenLc(true)
+ }
+ }
return (
<>
- {is_livechat_interactive && (
-
-
-
- {
- LC_API.open_chat_window()
- }}
- />,
- ,
- ]}
- />
-
-
-
-
- {
- LC_API.open_chat_window()
- }}
- />,
- ]}
- />
-
-
-
- )}
+
+
+
+ {
+ handleLcOpen()
+ }}
+ />,
+ ,
+ ]}
+ />
+
+
+
+
+ {
+ handleLcOpen()
+ }}
+ />,
+ ]}
+ />
+
+
+
)
}
diff --git a/src/store/index.tsx b/src/store/index.tsx
index 96850f56a73..837fb8d1123 100644
--- a/src/store/index.tsx
+++ b/src/store/index.tsx
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import { useWebsiteStatus } from 'components/hooks/use-website-status'
+import { useLivechat } from 'components/hooks/use-livechat'
import { isEuCountry, isP2PAllowedCountry, isUK } from 'common/country-base'
type DerivProviderProps = {
@@ -15,6 +16,7 @@ export const DerivProvider = ({ children }: DerivProviderProps) => {
const [is_p2p_allowed_country, setP2PAllowedCountry] = useState(false)
const [crypto_config, setCryptoConfig] = useState(null)
const [user_country, setUserCountry] = useState(null)
+ const [is_livechat_interactive, LC_API, is_loading_lc, setFirstLoadOpenLc] = useLivechat()
useEffect(() => {
if (website_status) {
@@ -39,6 +41,10 @@ export const DerivProvider = ({ children }: DerivProviderProps) => {
website_status_loading,
setWebsiteStatus,
user_country,
+ is_livechat_interactive,
+ LC_API,
+ is_loading_lc,
+ setFirstLoadOpenLc,
}}
>
{children}