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/refactor-footer #2668

Merged
3 commits merged into from
Feb 23, 2022
Merged

suthesh/refactor-footer #2668

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
48f3991
use new show component
Feb 21, 2022
a929b50
remove unused codes
Feb 22, 2022
996de48
Merge branch 'master' into suthesh/refactor-footer
Feb 23, 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
12 changes: 0 additions & 12 deletions src/components/layout/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,9 @@ import BottomSocialSection from './footer/bottom-social-wrapper'
import { DerivStore } from 'store'
// TODO: (discussion) make footer pure component, and move usage of footer to custom

const mobile_accordion_header = {
borderTop: '1px solid var(--color-grey-26)',
borderBottom: 'none',
padding: '0',
margin: '0 2rem',
backgroundColor: 'var(--color-grey-25)',
boxShadow: 'none',
}

const mobile_accordion_header_about = Object.assign({}, mobile_accordion_header)

const Footer = ({ type, is_ppc, is_ppc_redirect, academy }) => {
const { show_cookie_banner } = React.useContext(LocationContext)
const { is_eu_country } = React.useContext(DerivStore)
mobile_accordion_header_about.borderTop = 'none'

return (
<DefaultFooter has_banner_cookie={show_cookie_banner} is_eu_country={is_eu_country}>
Expand Down
14 changes: 7 additions & 7 deletions src/components/layout/footer/bottom-social-wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import SocialWrapperComponent from './social-wrapper'
import { useWebsiteStatus } from 'components/hooks/use-website-status'
import { Show } from 'components/containers'
import { Mobile, EU, NonEU } from 'components/containers'
import { isUKOrMXAccount } from 'common/utility'
import {
fb_non_eu_url,
Expand All @@ -22,17 +22,17 @@ const BottomSocialSection = ({ type }) => {

return (
<>
<Show.NonEU>
<NonEU>
<SocialWrapperComponent
is_career_page={type === 'careers'}
fb_url={fb_non_eu_url}
instagram_url={instagram_non_eu_url}
twitter_url={twitter_non_eu_url}
/>
</Show.NonEU>
</NonEU>

<Show.Eu>
<Show.Mobile>
<EU>
<Mobile>
<SocialWrapperComponent
is_career_page={type === 'careers'}
fb_url={isUKOrMXAccount(current_client_country) ? fb_uk_url : fb_eu_url}
Expand All @@ -47,8 +47,8 @@ const BottomSocialSection = ({ type }) => {
: twitter_eu_url
}
/>
</Show.Mobile>
</Show.Eu>
</Mobile>
</EU>
</>
)
}
Expand Down
15 changes: 5 additions & 10 deletions src/components/layout/footer/common/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export const AcademyWrapper = styled.div`
`

export const LinkWrapper = styled.div`
margin-top: ${(props) => (props.first_child == 'true' ? '0.8rem' : '1.6rem')};
margin-top: 1.6rem;

@media ${device.laptopM} {
${Title} {
Expand All @@ -124,6 +124,10 @@ export const LinkWrapper = styled.div`
font-size: var(--text-size-xs);
}
}

:nth-child(2) {
margin-top: 0.8rem;
}
`
export const DisclaimerWrapper = styled.div`
grid-area: disclaimer;
Expand Down Expand Up @@ -240,12 +244,3 @@ export const StyledMgaLogo = styled.img`
export const StyledLogo = styled.img`
width: 18.2rem;
`

export const mobile_accordion_header = {
borderTop: '1px solid var(--color-grey-26)',
borderBottom: 'none',
padding: '0',
margin: '0 2rem',
backgroundColor: 'var(--color-grey-25)',
boxShadow: 'none',
}
34 changes: 17 additions & 17 deletions src/components/layout/footer/disclaimer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import {
RiskWarning,
BoldLink,
} from './common/style'
import { Show } from 'components/containers'
import { Mobile, Desktop, EU, NonEU } from 'components/containers'
import { Localize, localize } from 'components/localization'
import { loss_percent } from 'common/constants'

const DisclaimerSection = ({ is_academy }) => {
return (
<>
<DisclaimerWrapper>
<Show.NonEU>
<NonEU>
<DisclaimerParagraph>
<Localize
translate_text="In the EU, financial products are offered by Deriv Investments (Europe) Limited, W Business Centre, Level 3, Triq Dun Karm, Birkirkara BKR 9033, Malta, licensed as a Category 3 Investment Services provider by the Malta Financial Services Authority (<0>licence no. IS/70156</0>)."
Expand Down Expand Up @@ -54,8 +54,8 @@ const DisclaimerSection = ({ is_academy }) => {
]}
/>
</DisclaimerParagraph>
</Show.NonEU>
<Show.Eu>
</NonEU>
<EU>
<DisclaimerParagraph>
<Localize
translate_text="Deriv Investments (Europe) Limited, W Business Centre, Level 3, Triq Dun Karm, Birkirkara BKR 9033, Malta, is licensed in Malta (<0>licence no. IS/70156</0>) and regulated by the Malta Financial Services Authority under the Investments Services Act to provide investment services in the European Union. It is also authorised and subject to limited regulation by the Financial Conduct Authority in the UK. Details about the extent of our authorisation and regulation by the Financial Conduct Authority are available from us on request."
Expand All @@ -69,7 +69,7 @@ const DisclaimerSection = ({ is_academy }) => {
]}
/>
</DisclaimerParagraph>
</Show.Eu>
</EU>
<DisclaimerParagraph>
{localize(
'Deriv Limited - 13 Castle Street, St. Helier, JE2 3BT, Jersey - is the holding company for the above subsidiaries.',
Expand All @@ -88,8 +88,8 @@ const DisclaimerSection = ({ is_academy }) => {
</DisclaimerParagraph>
)}
<RiskWarning>
<Show.Desktop>
<Show.NonEU>
<Desktop>
<NonEU>
<DisclaimerParagraph no_margin>
<Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
</DisclaimerParagraph>
Expand All @@ -101,8 +101,8 @@ const DisclaimerSection = ({ is_academy }) => {
]}
/>
</DisclaimerParagraph>
</Show.NonEU>
<Show.Eu>
</NonEU>
<EU>
<DisclaimerParagraph no_margin>
<Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients." />
</DisclaimerParagraph>
Expand All @@ -115,10 +115,10 @@ const DisclaimerSection = ({ is_academy }) => {
<DisclaimerParagraph>
<Localize translate_text="The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
</DisclaimerParagraph>
</Show.Eu>
</Show.Desktop>
<Show.Mobile>
<Show.Eu>
</EU>
</Desktop>
<Mobile>
<EU>
<DisclaimerParagraph no_margin>
<Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients." />
</DisclaimerParagraph>
Expand All @@ -131,8 +131,8 @@ const DisclaimerSection = ({ is_academy }) => {
<DisclaimerParagraph>
<Localize translate_text="The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
</DisclaimerParagraph>
</Show.Eu>
<Show.NonEU>
</EU>
<NonEU>
<DisclaimerParagraph no_margin>
<Localize translate_text="CFDs are considered complex derivatives and may not be suitable for retail clients. CFDs are complex instruments and come with a high risk of losing money rapidly due to leverage. You should consider whether you understand how CFDs work and whether you can afford to take the high risk of losing your money. The products mentioned here may be affected by changes in currency exchange rates. If you invest in these products, you may lose some or all of your investment, and the value of your investment may fluctuate. You should never invest money that you cannot afford to lose and never trade with borrowed money." />
</DisclaimerParagraph>
Expand All @@ -144,8 +144,8 @@ const DisclaimerSection = ({ is_academy }) => {
]}
/>
</DisclaimerParagraph>
</Show.NonEU>
</Show.Mobile>
</NonEU>
</Mobile>
</RiskWarning>
</DisclaimerWrapper>
</>
Expand Down
10 changes: 5 additions & 5 deletions src/components/layout/footer/logo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import SocialWrapperComponent from './social-wrapper'
import { DerivLogoWrapper, StyledLogo } from './common/style.js'
import { Show } from 'components/containers'
import { Desktop, EU } from 'components/containers'
import { useWebsiteStatus } from 'components/hooks/use-website-status'
import DerivLogo from 'images/svg/layout/deriv-footer.svg'
import { isUKOrMXAccount } from 'common/utility'
Expand All @@ -22,8 +22,8 @@ const LogoSection = ({ type }) => {
return (
<DerivLogoWrapper>
<StyledLogo src={DerivLogo} alt="logo" width="147" height="25" />
<Show.Eu>
<Show.Desktop>
<EU>
<Desktop>
<SocialWrapperComponent
is_career_page={type === 'careers'}
fb_url={isUKOrMXAccount(current_client_country) ? fb_uk_url : fb_eu_url}
Expand All @@ -38,8 +38,8 @@ const LogoSection = ({ type }) => {
: twitter_eu_url
}
/>
</Show.Desktop>
</Show.Eu>
</Desktop>
</EU>
</DerivLogoWrapper>
)
}
Expand Down
33 changes: 16 additions & 17 deletions src/components/layout/footer/main-links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,19 @@ import React from 'react'
import PropTypes from 'prop-types'
import { LinksWrapper, LinkWrapper, LinksCol, Title, Link } from './common/style.js'
import { localize } from 'components/localization'
import { Flex, Show } from 'components/containers'
import { NonUK } from 'components/containers/visibility'
import { Flex, Desktop, NonEU, NonUK } from 'components/containers'
import { deriv_status_page_url, binary_bot_url } from 'common/constants'

const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
return (
<LinksWrapper>
<Show.Desktop>
<Desktop>
<Flex jc="space-between">
<LinksCol>
<LinkWrapper>
<Title>{localize('ABOUT')}</Title>
</LinkWrapper>
<LinkWrapper first_child="true">
<LinkWrapper>
<Link to="/who-we-are/">{localize('Who we are')}</Link>
</LinkWrapper>
<LinkWrapper>
Expand All @@ -35,23 +34,23 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
<LinkWrapper>
<Title>{localize('TRADE')}</Title>
</LinkWrapper>
<LinkWrapper first_child="true">
<LinkWrapper>
<Link to="/dtrader/">{localize('DTrader')}</Link>
</LinkWrapper>
<Show.NonEU>
<NonEU>
<LinkWrapper>
<Link to="/landing/deriv-go/">{localize('Deriv GO')}</Link>
</LinkWrapper>
<LinkWrapper>
<Link to="/dbot/">{localize('DBot')}</Link>
</LinkWrapper>
</Show.NonEU>
</NonEU>
<LinkWrapper>
<Link to={is_ppc_redirect ? '/landing/dmt5/' : '/dmt5/'}>
{localize('DMT5')}
</Link>
</LinkWrapper>
<Show.NonEU>
<NonEU>
<LinkWrapper>
<Link to="/derivx/">{localize('Deriv X')}</Link>
</LinkWrapper>
Expand All @@ -76,21 +75,21 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
{localize('Binary Bot')}
</Link>
</LinkWrapper>
</Show.NonEU>
</NonEU>
</LinksCol>
{!is_ppc && (
<LinksCol>
<LinkWrapper>
<Title>{localize('TRADE TYPES')}</Title>
</LinkWrapper>
<LinkWrapper first_child="true">
<LinkWrapper>
<Link to="/trade-types/cfds/">{localize('CFDs')}</Link>
</LinkWrapper>
<Show.NonEU>
<NonEU>
<LinkWrapper>
<Link to="/trade-types/options/">{localize('Options')}</Link>
</LinkWrapper>
</Show.NonEU>
</NonEU>
<LinkWrapper>
<Link to="/trade-types/multiplier/">{localize('Multipliers')}</Link>
</LinkWrapper>
Expand All @@ -100,7 +99,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
<LinkWrapper>
<Title>{localize('MARKETS')}</Title>
</LinkWrapper>
<LinkWrapper first_child="true">
<LinkWrapper>
<Link to="/markets/forex/">{localize('Forex')}</Link>
</LinkWrapper>
{!is_ppc && (
Expand Down Expand Up @@ -130,7 +129,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
<LinkWrapper>
<Title>{localize('LEGAL')}</Title>
</LinkWrapper>
<LinkWrapper first_child="true">
<LinkWrapper>
<Link to="/regulatory/">{localize('Regulatory information')}</Link>
</LinkWrapper>
<LinkWrapper>
Expand All @@ -148,7 +147,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
<LinkWrapper>
<Title>{localize('PARTNER')}</Title>
</LinkWrapper>
<LinkWrapper first_child="true">
<LinkWrapper>
<Link to="/partners/affiliate-ib/">
{localize('Affiliates and IBs')}
</Link>
Expand All @@ -175,7 +174,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
<LinkWrapper>
<Title>{localize('RESOURCES')}</Title>
</LinkWrapper>
<LinkWrapper first_child="true">
<LinkWrapper>
<Link to="/help-centre/">{localize('Help centre')}</Link>
</LinkWrapper>
<LinkWrapper>
Expand Down Expand Up @@ -210,7 +209,7 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect }) => {
</LinkWrapper>
</LinksCol>
</Flex>
</Show.Desktop>
</Desktop>
</LinksWrapper>
)
}
Expand Down