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.

suthesh/livechat-hotfix #2499

Merged
3 commits merged into from
Jan 12, 2022
Merged

suthesh/livechat-hotfix #2499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bc21447
move livechat states to context
Jan 12, 2022
25dacc1
rename setter
Jan 12, 2022
0bed516
fix code smell
Jan 12, 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
24 changes: 14 additions & 10 deletions src/components/hooks/use-livechat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')
Expand All @@ -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*/
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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]
}
20 changes: 5 additions & 15 deletions src/components/layout/livechat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)
}
}, [])

Expand All @@ -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 ? (
<img
src={is_livechat_hover ? LiveChatHover : LiveChatIC}
width="32"
Expand Down
30 changes: 16 additions & 14 deletions src/pages/help-centre/_didnt-find-answer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react'
import React, { useContext } from 'react'
import styled from 'styled-components'
import { Text } from 'components/elements'
import { Button } from 'components/form'
import { localize } from 'components/localization'
import { Container } from 'components/containers'
import { useLivechat } from 'components/hooks/use-livechat'
import device from 'themes/device'
import ContactUsIcon from 'images/svg/help/livechat-red.svg'
import { DerivStore } from 'store'

const DFYAWrapper = styled.section`
background-color: var(--color-black-3);
Expand Down Expand Up @@ -42,26 +42,28 @@ const MiddleText = styled(Text)`
`

export const DidntFindYourAnswerBanner = () => {
const [is_livechat_interactive, LC_API] = useLivechat()
const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)
return (
<DFYAWrapper>
<DFYASection>
<StyledIcon src={ContactUsIcon} alt="contact us icon" />
<MiddleText size="var(--text-size-l)" color="white" m="0 2.4rem">
{localize('Didn’t find your answer? We can help.')}
</MiddleText>
{is_livechat_interactive && (
<Button
secondary="true"
onClick={() => {
<Button
secondary="true"
onClick={() => {
if (is_livechat_interactive) {
LC_API.open_chat_window()
}}
weight="bold"
color="black"
>
{localize('Chat')}
</Button>
)}
} else {
setFirstLoadOpenLc(true)
}
}}
weight="bold"
color="black"
>
{localize('Chat')}
</Button>
</DFYASection>
</DFYAWrapper>
)
Expand Down
9 changes: 4 additions & 5 deletions src/pages/livechat/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 (
Expand Down
108 changes: 58 additions & 50 deletions src/pages/partners/payment-agent/_faq-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' })``

Expand Down Expand Up @@ -58,53 +59,60 @@ const General = () => (
</TextPrimary>
</>
)
const AccountManagement = () => (
<>
<Header as="h5" type="main-paragraph">
{localize('How can I add, remove or change my accepted payment methods?')}
</Header>
<TextPrimary>
<Localize
translate_text="To change your payment method, please contact us via <0>livechat</0>."
components={[
<TextLink
key={0}
color="red"
onClick={() => {
// eslint-disable-next-line no-undef
LC_API.open_chat_window()
}}
/>,
]}
/>
</TextPrimary>
<HeaderPrimary as="h5" type="main-paragraph">
{localize('As a payment agent, will I receive commissions from Deriv?')}
</HeaderPrimary>
<TextPrimary>
{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.',
)}
</TextPrimary>
<HeaderPrimary as="h5" type="main-paragraph">
{localize('Can I advertise my services to Deriv clients?')}
</HeaderPrimary>
<TextPrimary>
<Localize
translate_text="Yes, provided that you follow all the relevant terms and conditions (see the tab entitled 'For business partners' on our <0>Terms and conditions</0> page)."
components={[<LocalizedLinkText to="/terms-and-conditions/#clients" key={0} />]}
/>
</TextPrimary>
<HeaderPrimary as="h5" type="main-paragraph">
{localize(
'Will I still be able to trade with my account after registering as a payment agent?',
)}
</HeaderPrimary>
<TextPrimary>
{localize(
'Yes. As a payment agent, you will still be able to trade with your account.',
)}
</TextPrimary>
</>
)
const AccountManagement = () => {
const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore)

return (
<>
<Header as="h5" type="main-paragraph">
{localize('How can I add, remove or change my accepted payment methods?')}
</Header>
<TextPrimary>
<Localize
translate_text="To change your payment method, please contact us via <0>livechat</0>."
components={[
<TextLink
key={0}
color="red"
onClick={() => {
if (is_livechat_interactive) {
LC_API.open_chat_window()
} else {
setFirstLoadOpenLc(true)
}
}}
/>,
]}
/>
</TextPrimary>
<HeaderPrimary as="h5" type="main-paragraph">
{localize('As a payment agent, will I receive commissions from Deriv?')}
</HeaderPrimary>
<TextPrimary>
{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.',
)}
</TextPrimary>
<HeaderPrimary as="h5" type="main-paragraph">
{localize('Can I advertise my services to Deriv clients?')}
</HeaderPrimary>
<TextPrimary>
<Localize
translate_text="Yes, provided that you follow all the relevant terms and conditions (see the tab entitled 'For business partners' on our <0>Terms and conditions</0> page)."
components={[<LocalizedLinkText to="/terms-and-conditions/#clients" key={0} />]}
/>
</TextPrimary>
<HeaderPrimary as="h5" type="main-paragraph">
{localize(
'Will I still be able to trade with my account after registering as a payment agent?',
)}
</HeaderPrimary>
<TextPrimary>
{localize(
'Yes. As a payment agent, you will still be able to trade with your account.',
)}
</TextPrimary>
</>
)
}
export { General, AccountManagement }
Loading