binary-com · mustofa-binary · Nov 17, 2020 · Oct 30, 2020 · Nov 2, 2020 · Nov 2, 2020
@@ -87,7 +87,7 @@ function debounce(func, wait, immediate) {
     }
 }
 
-const trimSpaces = value => value.trim()
+const trimSpaces = (value) => value.trim()
 
 const deriv_app_url = 'https://app.deriv.com'
 const deriv_bot_app_url = 'https://app.deriv.com/bot'

@@ -12,7 +12,7 @@ const StyledBackground = styled(BackgroundImage)`
     }
 `
 
-const Background = ({ children, data, style, dark, ...props }) => {
+export const Background = ({ children, data, style, dark, ...props }) => {
     return (
         <StyledBackground
             Tag="div"

@@ -4,7 +4,7 @@ import { StaticQuery, graphql } from 'gatsby'
 import Img from 'gatsby-image'
 import PropTypes from 'prop-types'
 
-const ImageWrapper = styled.div`
+export const ImageWrapper = styled.div`
     & .gatsby-image-wrapper {
         width: ${(props) => props.width};
         height: ${(props) => props.height};

@@ -7,7 +7,7 @@ import DotLoader from './dot-loader'
 import Dropdown from './dropdown'
 import Checkbox from './checkbox'
 import Image from './image'
-import QueryImage from './query-image'
+import QueryImage, { ImageWrapper } from './query-image'
 import { StyledLink } from './link'
 import {
     OffCanvasMenuWrapper as OffCanvasMenu,
@@ -16,7 +16,7 @@ import {
 } from './off-canvas-menu'
 import SideTab from './side-tab'
 import Tabs from './default-tab'
-import { Text, LinkText, LocalizedLinkText, Header, BaseElement } from './typography'
+import { Text, LinkText, LocalizedLinkText, Header, BaseElement, SpanLinkText } from './typography'
 import Timeline from './timeline'
 import { Ul, Li } from './lists'
 import { Carousel } from './carousel'
@@ -37,6 +37,7 @@ export {
     Dropdown,
     Checkbox,
     Image,
+    ImageWrapper,
     QueryImage,
     StyledLink,
     NavCard,
@@ -49,6 +50,7 @@ export {
     LinkText,
     LocalizedLinkText,
     Header,
+    SpanLinkText,
     Timeline,
     Ul,
     Li,

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import Img from 'gatsby-image'
 import PropTypes from 'prop-types'
 
-const ImageWrapper = styled.div`
+export const ImageWrapper = styled.div`
     width: ${(props) => (props.width ? props.width : '100%')};
     height: ${(props) => props.height};
 

@@ -6,6 +6,16 @@ import device from 'themes/device'
 
 const createElement = React.createElement
 
+export const BaseLink = css`
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--color-red);
+        text-decoration: underline;
+    }
+`
+
 export const BaseElement = css`
     text-align: ${(props) => props.align || 'left'};
     padding: ${(props) => props.padding || ''};
@@ -46,13 +56,11 @@ export const Header = styled(({ as = 'h1', children, ...props }) =>
 `
 
 export const LinkText = styled(Text).attrs({ as: 'a' })`
-    text-decoration: none;
-    cursor: pointer;
+    ${BaseLink}
+`
 
-    &:hover {
-        color: var(--color-red);
-        text-decoration: underline;
-    }
+export const SpanLinkText = styled(Text).attrs({ as: 'span' })`
+    ${BaseLink}
 `
 
 export const LocalizedLinkText = styled((props) => <LocalizedLink {...props} />)`

@@ -2,13 +2,13 @@ import React from 'react'
 import { Box, Container } from 'components/containers'
 import { Text } from 'components/elements'
 import { localize } from 'components/localization'
-import CopyrightIc from 'images/svg/copyright.svg'
+import CopyrightIc from 'images/svg/copyright-white.svg'
 
 const Copyright = () => {
     return (
         <Box bg="var(--color-black)">
             <Container jc="flex-start" p="1.5rem 0" ai="center">
-                <img src={CopyrightIc} alt="copyright ic" width="1.6rem" />
+                <img src={CopyrightIc} alt="copyright ic" width="16px" />
                 <Text color="white" ml="0.4rem">
                     {localize('2020 Deriv | All rights reserved')}
                 </Text>

@@ -6,6 +6,7 @@ import Footer from './footer'
 import Copyright from './copyright'
 import { Nav, NavStatic, NavPartners, NavInterim } from './nav'
 import { NavCareers } from './nav-careers'
+import { NavP2P } from './nav-p2p'
 import { LocationProvider } from './location-context'
 import EURedirect, { useModal } from 'components/custom/_eu-redirect-modal.js'
 import CookieBanner from 'components/custom/cookie-banner'
@@ -27,7 +28,15 @@ const has_dataLayer = isBrowser() && window.dataLayer
 const TRACKING_STATUS_KEY = 'tracking_status'
 const tracking_status_cookie = new CookieStorage(TRACKING_STATUS_KEY)
 
-const Layout = ({ children, type, interim_type, padding_top, no_login_signup }) => {
+const Layout = ({
+    children,
+    type,
+    interim_type,
+    padding_top,
+    no_login_signup,
+    no_live_chat,
+    nav_type,
+}) => {
     const { is_eu_country } = React.useContext(DerivStore)
     const [has_mounted, setMounted] = React.useState(false)
     const [show_cookie_banner, setShowCookieBanner] = React.useState(false)
@@ -88,6 +97,10 @@ const Layout = ({ children, type, interim_type, padding_top, no_login_signup })
             Navigation = <NavCareers />
             FooterNav = <Footer no_language={true} />
             break
+        case 'p2p':
+            Navigation = <NavP2P nav_type={nav_type} />
+            FooterNav = <Copyright />
+            break
         default:
             Navigation = <Nav />
             FooterNav = <Footer />
@@ -114,11 +127,13 @@ const Layout = ({ children, type, interim_type, padding_top, no_login_signup })
                     is_open={show_cookie_banner}
                 />
             )}
-            <LiveChat
-                LC_API={LC_API}
-                is_livechat_interactive={is_livechat_interactive}
-                setLiveChatInteractive={setLiveChatInteractive}
-            />
+            {!no_live_chat && (
+                <LiveChat
+                    LC_API={LC_API}
+                    is_livechat_interactive={is_livechat_interactive}
+                    setLiveChatInteractive={setLiveChatInteractive}
+                />
+            )}
             {FooterNav}
             <EURedirect
                 toggle={toggleModal}
@@ -137,6 +152,8 @@ const Layout = ({ children, type, interim_type, padding_top, no_login_signup })
 Layout.propTypes = {
     children: PropTypes.node.isRequired,
     interim_type: PropTypes.string,
+    nav_type: PropTypes.string,
+    no_live_chat: PropTypes.bool,
     no_login_signup: PropTypes.bool,
     padding_top: PropTypes.string,
     type: PropTypes.string,

@@ -0,0 +1,96 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { graphql, useStaticQuery } from 'gatsby'
+import { StyledNav, NavWrapper, LogoLink, Wrapper, NavLeft } from './nav'
+import { localize } from 'components/localization'
+import { QueryImage } from 'components/elements'
+import { Show } from 'components/containers'
+import device from 'themes/device'
+import LogoCombinedShape from 'images/svg/logo-combined-shape.svg'
+
+const query = graphql`
+    query {
+        deriv: file(relativePath: { eq: "logo.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const StyledWrapper = styled(Wrapper)`
+    @media ${device.tabletL} {
+        justify-content: center;
+    }
+`
+
+const StyledLogoLink = styled(LogoLink)`
+    @media ${device.tabletS} {
+        & svg,
+        .gatsby-image-wrapper {
+            width: 100%;
+        }
+    }
+`
+
+const P2PNavLeft = styled(NavLeft)`
+    @media ${device.tabletL} {
+        display: flex;
+        width: 180px;
+    }
+`
+
+const Line = styled.div`
+    width: 1px;
+    height: 28px;
+    margin-right: 8px;
+    margin-left: 8px;
+    background-color: var(--color-white);
+
+    @media ${device.tabletL} {
+        height: 16px;
+        margin-left: 5px;
+        margin-right: 4px;
+    }
+`
+
+export const NavP2P = ({ nav_type }) => {
+    const data = useStaticQuery(query)
+
+    return (
+        <>
+            <NavWrapper>
+                <StyledNav>
+                    <StyledWrapper>
+                        <P2PNavLeft>
+                            <StyledLogoLink
+                                to={nav_type === 'p2p-v1' ? '/p2p/v1' : '/p2p/v2'}
+                                aria-label={localize('Home')}
+                            >
+                                <QueryImage
+                                    data={data['deriv']}
+                                    alt={localize('Deriv')}
+                                    max_width="16.4rem"
+                                    width="100%"
+                                    height="auto"
+                                />
+                            </StyledLogoLink>
+                            <Line />
+                            <Show.Desktop min_width="992">
+                                <img src={LogoCombinedShape} alt="get trading" />
+                            </Show.Desktop>
+                            <Show.Mobile>
+                                <img src={LogoCombinedShape} alt="get trading" width="71px" />
+                            </Show.Mobile>
+                        </P2PNavLeft>
+                    </StyledWrapper>
+                </StyledNav>
+            </NavWrapper>
+        </>
+    )
+}
+
+NavP2P.propTypes = {
+    nav_type: PropTypes.string,
+}
+
+export default { NavP2P }