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.

MohammadH/ Homepage crowdin eu uk #2658

Merged
merged 18 commits into from
Feb 24, 2022
Merged

MohammadH/ Homepage crowdin eu uk #2658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
bc6ab54
feat: update visibility component
Feb 16, 2022
fb9f354
feat: add all eu uk changes to new crowdin homepage
Feb 16, 2022
37f5515
fix: apply all changes suggested by salar and yashim
Feb 17, 2022
9a2c603
fix: make dmt5 the default active slide in our-platforms carousel eu …
Feb 18, 2022
d5438fe
chore: replace localize by Localize component
Feb 18, 2022
fb08431
fix: update multipliers description
Feb 18, 2022
d45f889
fix: update hero description for eu uk
Feb 18, 2022
cc69c84
chore: remove deriv-go and x-trader from hero slideshow
Feb 19, 2022
2d6e4f9
style: update social icons
Feb 19, 2022
4a53f91
fix: justify social icons left on mobile
Feb 21, 2022
d422602
fix: hero description is the same in cr and eunow and different in uk
Feb 21, 2022
337a917
fix: remove options in dtrader description eu uk
Feb 21, 2022
a594fb3
fix: remove code error in utils.tsx
Feb 21, 2022
8126575
feat: update footer to match figma design
Feb 21, 2022
459232c
feat: new navbar for eu uk
Feb 21, 2022
ef2a740
fix: hero description for eu region
Feb 22, 2022
a0f188c
fix: rename digital options to options in footer
Feb 22, 2022
e793e95
revert: rename Options to Digital options
Feb 22, 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
3 changes: 3 additions & 0 deletions src/common/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ const domain_url =
? window.location.hostname
: deriv_com_url

export const eu_domains = ['eu', 'staging-eu']
export const uk_domains = ['uk', 'staging-uk']

// URL
export const domain_full_url = `https://${domain_url}`
export const deriv_app_id = domain_url === deriv_com_url ? deriv_com_app_id : deriv_me_app_id
Expand Down
61 changes: 34 additions & 27 deletions src/components/containers/visibility.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { ReactElement, useEffect, useState } from 'react'
import React, { ReactElement, useEffect, useState, useContext } from 'react'
import styled from 'styled-components'
import { size } from 'themes/device'
import { useBrowserResize } from 'components/hooks/use-browser-resize'
import { DerivStore } from 'store'
import { eu_domains, uk_domains } from 'common/constants'

type ResponsiveContainerProps = {
children: ReactElement
Expand All @@ -25,6 +26,7 @@ const DesktopLayer = styled.div<LayerProps>`
display: none;
}
`

const MobileLayer = styled.div<LayerProps>`
@media (min-width: ${({ breakpoint }) => breakpoint}px) {
display: none;
Expand All @@ -37,11 +39,12 @@ const domainBasedCheck = () => {

useEffect(() => {
if (window) {
const host_name = window.location.hostname
if (host_name.includes('eu')) {
const subdomain = window.location.hostname.split('.').slice(0, -2).join('.')

if (eu_domains.includes(subdomain)) {
setEuDomain(true)
}
if (host_name.includes('uk')) {
if (uk_domains.includes(subdomain)) {
setUkDomain(true)
}
}
Expand All @@ -64,6 +67,20 @@ const deviceRenderer = (): boolean => {
return is_loaded
}

export const getCountryRule = () => {
const { is_eu_domain, is_uk_domain } = domainBasedCheck()
const { is_eu_country, is_uk_country } = useContext<StoreDataType>(DerivStore)

const is_eu = (is_eu_country || is_eu_domain) && !is_uk_country
const is_uk = is_uk_country || is_uk_domain
const is_non_uk = !is_uk
const is_non_eu = !is_eu
const is_eu_uk = !(!is_eu && !is_uk)
const is_row = !is_eu_uk

return { is_eu, is_uk, is_non_uk, is_non_eu, is_eu_uk, is_row }
}

export const Desktop = ({
children,
breakpoint = DEFAULT_BREAKPOINT,
Expand Down Expand Up @@ -96,47 +113,37 @@ export const Mobile = ({ children, breakpoint = DEFAULT_BREAKPOINT }: Responsive
}

export const EU = ({ children }: ResponsiveContainerProps) => {
const { is_eu_domain } = domainBasedCheck()
const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)

const is_eu = is_eu_country || is_eu_domain
const { is_eu } = getCountryRule()

return is_eu ? <>{children}</> : null
}

export const NonEU = ({ children }: ResponsiveContainerProps) => {
const { is_eu_domain } = domainBasedCheck()
const { is_eu_country } = React.useContext<StoreDataType>(DerivStore)
const { is_non_eu } = getCountryRule()

const is_eu = is_eu_domain || is_eu_country

return !is_eu ? <>{children}</> : null
return is_non_eu ? <>{children}</> : null
}

export const UK = ({ children }: ResponsiveContainerProps) => {
const { is_uk_domain } = domainBasedCheck()
const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)

const is_uk = is_uk_country || is_uk_domain
const { is_uk } = getCountryRule()

return is_uk ? <>{children}</> : null
}

export const NonUK = ({ children }: ResponsiveContainerProps) => {
const { is_uk_domain } = domainBasedCheck()
const { is_uk_country } = React.useContext<StoreDataType>(DerivStore)
const { is_non_uk } = getCountryRule()

const is_uk = is_uk_domain || is_uk_country
return is_non_uk ? <>{children}</> : null
}

return !is_uk ? <>{children}</> : null
export const UKEU = ({ children }: ResponsiveContainerProps) => {
const { is_eu_uk } = getCountryRule()

return is_eu_uk ? <>{children}</> : null
}

export const ROW = ({ children }: ResponsiveContainerProps) => {
const { is_uk_domain, is_eu_domain } = domainBasedCheck()
const { is_uk_country, is_eu_country } = React.useContext<StoreDataType>(DerivStore)

const is_uk = is_uk_country || is_uk_domain
const is_eu = is_eu_domain || is_eu_country
const { is_row } = getCountryRule()

return !is_eu && !is_uk ? <>{children}</> : null
return is_row ? <>{children}</> : null
}
106 changes: 17 additions & 89 deletions src/components/custom/_signup-public.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import { Flex, Show, Box, Container } from 'components/containers'
import { deriv_app_url } from 'common/constants'
import device from 'themes/device.js'
// SVG
import Apple from 'images/svg/custom/apple.svg'
import Facebook from 'images/svg/custom/facebook-blue.svg'
import Google from 'images/svg/custom/google.svg'
import Apple from 'images/svg/custom/apple-40.svg'
import Facebook from 'images/svg/custom/facebook-40.svg'
import Google from 'images/svg/custom/google-40.svg'
import Arrow from 'images/svg/custom/chevron-right.svg'

const query = graphql`
Expand Down Expand Up @@ -155,57 +155,15 @@ const MobileSocialWrapper = styled(SocialWrapper)`
}
`
const SocialButton = styled(Button)`
width: 110px;
line-height: 27px;
padding: 5px;
border-radius: 4px;
justify-content: center;
display: flex;
background-color: var(--color-white);
border: solid 1px var(--color-grey-7);
height: 4rem;
margin: 0 0.8rem;
padding: 0;
margin: 0 1rem;
border: none;

&:nth-of-type(1) {
margin-left: 0;
}
img {
padding-right: 5px;
object-fit: contain;
}
@media ${device.tabletL} {
width: 114px;
height: 48px;
padding: 0;
justify-content: center;
align-items: center;

img {
margin-top: 12px;
width: 30px;
}
}
@media (max-width: 500px) {
width: 100%;
height: 40px;
padding: 0;
line-height: 14px;

img {
margin-top: 3px;
padding-right: 0;
}
}
`
const SocialButtonText = styled.div`
display: flex;

span {
display: block;
width: 100%;
}
`

const StyledHeader = styled(Header)`
width: ${(props) => props.width || '41.4rem'};
position: ${(props) => props.position || 'static'};
Expand Down Expand Up @@ -420,10 +378,7 @@ const SignupPublic = ({
type="button"
social
>
<SocialButtonText>
<img src={Google} alt="google" width="24" height="24" />
<span>Google</span>
</SocialButtonText>
<img src={Google} alt="google" width="40" height="40" />
</SocialButton>
<SocialButton
onClick={handleSocialSignup}
Expand All @@ -433,15 +388,7 @@ const SignupPublic = ({
type="button"
social
>
<SocialButtonText>
<img
src={Facebook}
alt="facebook"
width="24"
height="24"
/>
<span>Facebook</span>
</SocialButtonText>
<img src={Facebook} alt="facebook" width="40" height="40" />
</SocialButton>
<SocialButton
onClick={handleSocialSignup}
Expand All @@ -451,10 +398,7 @@ const SignupPublic = ({
type="button"
social
>
<SocialButtonText>
<img src={Apple} alt="apple" width="24" height="24" />
<span>Apple</span>
</SocialButtonText>
<img src={Apple} alt="apple" width="40" height="40" />
</SocialButton>
</SocialWrapper>
</StyledFormWrapper>
Expand Down Expand Up @@ -579,14 +523,7 @@ const SignupPublic = ({
type="button"
social
>
<span>
<img
src={Google}
alt="google"
width="24"
height="24"
/>
</span>
<img src={Google} alt="google" width="40" height="40" />
</SocialButton>
<SocialButton
onClick={handleSocialSignup}
Expand All @@ -596,14 +533,12 @@ const SignupPublic = ({
type="button"
social
>
<span>
<img
src={Facebook}
alt="facebook"
width="24"
height="24"
/>
</span>
<img
src={Facebook}
alt="facebook"
width="40"
height="40"
/>
</SocialButton>
<SocialButton
onClick={handleSocialSignup}
Expand All @@ -613,14 +548,7 @@ const SignupPublic = ({
type="button"
social
>
<span>
<img
src={Apple}
alt="apple"
width="24"
height="24"
/>
</span>
<img src={Apple} alt="apple" width="40" height="40" />
</SocialButton>
</Flex>
</MobileSocialWrapper>
Expand Down
Loading