From be9bf389a85f0b7d604cb3c7e8bca410957e2c01 Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Wed, 18 Nov 2020 09:40:52 +0800
Subject: [PATCH 1/2] feat: add QR code and desktop copywriting

---
 src/images/common/p2p_playstore.png       | Bin 0 -> 4082 bytes
 src/pages/p2p/components/_availability.js |  99 +++++++++++++++++-----
 2 files changed, 80 insertions(+), 19 deletions(-)
 create mode 100644 src/images/common/p2p_playstore.png

diff --git a/src/images/common/p2p_playstore.png b/src/images/common/p2p_playstore.png
new file mode 100644
index 0000000000000000000000000000000000000000..80917c1e57127230cefb74a45fbeb4ec46e18ce3
GIT binary patch
literal 4082
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

literal 0
HcmV?d00001

diff --git a/src/pages/p2p/components/_availability.js b/src/pages/p2p/components/_availability.js
index 3e12de2e5c2..db4e265084e 100644
--- a/src/pages/p2p/components/_availability.js
+++ b/src/pages/p2p/components/_availability.js
@@ -1,10 +1,11 @@
 import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
 import styled from 'styled-components'
 import Desktop from 'images/svg/p2p-desktop.svg'
 import Mobile from 'images/svg/p2p-mobile.svg'
 import { localize, Localize } from 'components/localization'
-import { Header, LocalizedLinkText, SpanLinkText, Text } from 'components/elements'
-import { Flex, SectionContainer } from 'components/containers'
+import { Header, LocalizedLinkText, SpanLinkText, Text, QueryImage } from 'components/elements'
+import { Flex, SectionContainer, Show } from 'components/containers'
 import Login from 'common/login'
 import device from 'themes/device'
 
@@ -79,13 +80,16 @@ const StyledText = styled(Text)`
 `
 const Line = styled.div`
     width: 1px;
-    height: 38rem;
+    height: 44rem;
     border: solid 1px var(--color-grey-21);
     margin: 0 4.5rem;
 
     @media ${device.laptop} {
         height: 47rem;
     }
+    @media ${device.tabletL} {
+        height: 52rem;
+    }
     @media ${device.tablet} {
         height: 1px;
         width: 50rem;
@@ -102,7 +106,24 @@ const Line = styled.div`
     }
 `
 
+const Left = styled.div`
+    width: 78%;
+`
+
+const Right = styled.div`
+    width: 22%;
+`
+
+const query = graphql`
+    query {
+        qr_code: file(relativePath: { eq: "p2p_playstore.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
 const Availability = () => {
+    const data = useStaticQuery(query)
     const handleLogin = () => {
         Login.redirectToLogin()
     }
@@ -116,7 +137,8 @@ const Availability = () => {
                 as="h2"
                 mb="4rem"
             >
-                {localize('Available on desktop and mobile')}
+                <Show.Desktop min_width="992">{localize('How to get DP2P')}</Show.Desktop>
+                <Show.Mobile>{localize('Available on desktop and mobile')}</Show.Mobile>
             </StyledHeader>
             <Flex
                 tablet_direction="column"
@@ -130,7 +152,12 @@ const Availability = () => {
                     </Row>
                     <Row>
                         <StyledCardHeader mobile_margin="unset" as="h4">
-                            <Localize translate_text="DP2P on your computer" />
+                            <Show.Desktop min_width="992">
+                                <Localize translate_text="On your computer" />
+                            </Show.Desktop>
+                            <Show.Mobile>
+                                <Localize translate_text="DP2P on your computer" />
+                            </Show.Mobile>
                         </StyledCardHeader>
                     </Row>
                     <div>
@@ -169,24 +196,58 @@ const Availability = () => {
                     </Row>
                     <Row>
                         <StyledCardHeader mobile_margin="unset" as="h4">
-                            <Localize translate_text="DP2P on your mobile" />
+                            <Show.Desktop min_width="992">
+                                <Localize translate_text="On your mobile" />
+                            </Show.Desktop>
+                            <Show.Mobile>
+                                <Localize translate_text="DP2P on your mobile" />
+                            </Show.Mobile>
                         </StyledCardHeader>
                     </Row>
                     <div>
                         <StyledText>
-                            <Localize
-                                translate_text="1. Get the app from the <0>Google Play Store</0>."
-                                components={[
-                                    <LocalizedLinkText
-                                        external
-                                        to="https://play.google.com/store/apps/details?id=com.deriv.dp2p"
-                                        target="_blank"
-                                        size={24}
-                                        color="red"
-                                        key={0}
-                                    />,
-                                ]}
-                            />
+                            <Show.Desktop min_width="992">
+                                <Flex>
+                                    <Left>
+                                        <Localize
+                                            translate_text="1. Scan this QR code to download the app from the <0>Google Play Store</0>."
+                                            components={[
+                                                <LocalizedLinkText
+                                                    external
+                                                    to="https://play.google.com/store/apps/details?id=com.deriv.dp2p"
+                                                    target="_blank"
+                                                    size={24}
+                                                    color="red"
+                                                    key={0}
+                                                />,
+                                            ]}
+                                        />
+                                    </Left>
+                                    <Right>
+                                        <QueryImage
+                                            data={data['qr_code']}
+                                            alt={'play store'}
+                                            width="108px"
+                                            height="108px"
+                                        />
+                                    </Right>
+                                </Flex>
+                            </Show.Desktop>
+                            <Show.Mobile>
+                                <Localize
+                                    translate_text="1. Get the app from the <0>Google Play Store</0>."
+                                    components={[
+                                        <LocalizedLinkText
+                                            external
+                                            to="https://play.google.com/store/apps/details?id=com.deriv.dp2p"
+                                            target="_blank"
+                                            size={24}
+                                            color="red"
+                                            key={0}
+                                        />,
+                                    ]}
+                                />
+                            </Show.Mobile>
                         </StyledText>
                         <StyledText>
                             <Localize translate_text="2. Log in to your Deriv account, and register for DP2P." />

From 354c395553d1dec84af91507451bf9813e53edcb Mon Sep 17 00:00:00 2001
From: sean-binary <sean@deriv.com>
Date: Wed, 18 Nov 2020 15:18:08 +0800
Subject: [PATCH 2/2] moved p2p related assets into its own folder

---
 src/common/utility.js                               |   2 ++
 src/images/common/{ => p2p}/p2p_banner.png          | Bin
 src/images/common/{ => p2p}/p2p_banner_mobile.png   | Bin
 src/images/common/{ => p2p}/p2p_buy_sell.png        | Bin
 src/images/common/{ => p2p}/p2p_hero_background.png | Bin
 .../common/{ => p2p}/p2p_hero_background_mobile.png | Bin
 src/images/common/{ => p2p}/p2p_hero_img.png        | Bin
 src/images/common/{ => p2p}/p2p_local_currency.png  | Bin
 src/images/common/{ => p2p}/p2p_playstore.png       | Bin
 src/images/common/{ => p2p}/p2p_web_and_mobile.png  | Bin
 src/pages/p2p/components/_availability.js           |   7 ++++---
 src/pages/p2p/components/_dp2p.js                   |   6 +++---
 src/pages/p2p/components/_hero.js                   |   8 +++++---
 src/pages/p2p/components/_p2pbanner.js              |   4 ++--
 14 files changed, 16 insertions(+), 11 deletions(-)
 rename src/images/common/{ => p2p}/p2p_banner.png (100%)
 rename src/images/common/{ => p2p}/p2p_banner_mobile.png (100%)
 rename src/images/common/{ => p2p}/p2p_buy_sell.png (100%)
 rename src/images/common/{ => p2p}/p2p_hero_background.png (100%)
 rename src/images/common/{ => p2p}/p2p_hero_background_mobile.png (100%)
 rename src/images/common/{ => p2p}/p2p_hero_img.png (100%)
 rename src/images/common/{ => p2p}/p2p_local_currency.png (100%)
 rename src/images/common/{ => p2p}/p2p_playstore.png (100%)
 rename src/images/common/{ => p2p}/p2p_web_and_mobile.png (100%)

diff --git a/src/common/utility.js b/src/common/utility.js
index f917dd72239..b33d8d285fc 100644
--- a/src/common/utility.js
+++ b/src/common/utility.js
@@ -101,6 +101,7 @@ const zoho_url = 'https://deriv.zohorecruit.com/'
 const brand_name = 'Deriv'
 const map_api_key = 'AIzaSyAEha6-HeZuI95L9JWmX3m6o-AxQr_oFqU'
 const gtm_test_domain = 'deriv-com.binary.sx'
+const p2p_playstore_url = 'https://play.google.com/store/apps/details?id=com.deriv.dp2p'
 const mga_link_url =
     'https://authorisation.mga.org.mt/verification.aspx?lang=EN&company=a5fd1edc-d072-4c26-b0cd-ab3fa0f0cc40&details=1'
 
@@ -144,4 +145,5 @@ export {
     toHashFormat,
     zoho_url,
     trimSpaces,
+    p2p_playstore_url,
 }
diff --git a/src/images/common/p2p_banner.png b/src/images/common/p2p/p2p_banner.png
similarity index 100%
rename from src/images/common/p2p_banner.png
rename to src/images/common/p2p/p2p_banner.png
diff --git a/src/images/common/p2p_banner_mobile.png b/src/images/common/p2p/p2p_banner_mobile.png
similarity index 100%
rename from src/images/common/p2p_banner_mobile.png
rename to src/images/common/p2p/p2p_banner_mobile.png
diff --git a/src/images/common/p2p_buy_sell.png b/src/images/common/p2p/p2p_buy_sell.png
similarity index 100%
rename from src/images/common/p2p_buy_sell.png
rename to src/images/common/p2p/p2p_buy_sell.png
diff --git a/src/images/common/p2p_hero_background.png b/src/images/common/p2p/p2p_hero_background.png
similarity index 100%
rename from src/images/common/p2p_hero_background.png
rename to src/images/common/p2p/p2p_hero_background.png
diff --git a/src/images/common/p2p_hero_background_mobile.png b/src/images/common/p2p/p2p_hero_background_mobile.png
similarity index 100%
rename from src/images/common/p2p_hero_background_mobile.png
rename to src/images/common/p2p/p2p_hero_background_mobile.png
diff --git a/src/images/common/p2p_hero_img.png b/src/images/common/p2p/p2p_hero_img.png
similarity index 100%
rename from src/images/common/p2p_hero_img.png
rename to src/images/common/p2p/p2p_hero_img.png
diff --git a/src/images/common/p2p_local_currency.png b/src/images/common/p2p/p2p_local_currency.png
similarity index 100%
rename from src/images/common/p2p_local_currency.png
rename to src/images/common/p2p/p2p_local_currency.png
diff --git a/src/images/common/p2p_playstore.png b/src/images/common/p2p/p2p_playstore.png
similarity index 100%
rename from src/images/common/p2p_playstore.png
rename to src/images/common/p2p/p2p_playstore.png
diff --git a/src/images/common/p2p_web_and_mobile.png b/src/images/common/p2p/p2p_web_and_mobile.png
similarity index 100%
rename from src/images/common/p2p_web_and_mobile.png
rename to src/images/common/p2p/p2p_web_and_mobile.png
diff --git a/src/pages/p2p/components/_availability.js b/src/pages/p2p/components/_availability.js
index db4e265084e..0b6078f0ada 100644
--- a/src/pages/p2p/components/_availability.js
+++ b/src/pages/p2p/components/_availability.js
@@ -8,6 +8,7 @@ import { Header, LocalizedLinkText, SpanLinkText, Text, QueryImage } from 'compo
 import { Flex, SectionContainer, Show } from 'components/containers'
 import Login from 'common/login'
 import device from 'themes/device'
+import { p2p_playstore_url } from 'common/utility'
 
 const Row = styled.div`
     display: flex;
@@ -116,7 +117,7 @@ const Right = styled.div`
 
 const query = graphql`
     query {
-        qr_code: file(relativePath: { eq: "p2p_playstore.png" }) {
+        qr_code: file(relativePath: { eq: "p2p/p2p_playstore.png" }) {
             ...fadeIn
         }
     }
@@ -214,7 +215,7 @@ const Availability = () => {
                                             components={[
                                                 <LocalizedLinkText
                                                     external
-                                                    to="https://play.google.com/store/apps/details?id=com.deriv.dp2p"
+                                                    to={p2p_playstore_url}
                                                     target="_blank"
                                                     size={24}
                                                     color="red"
@@ -239,7 +240,7 @@ const Availability = () => {
                                     components={[
                                         <LocalizedLinkText
                                             external
-                                            to="https://play.google.com/store/apps/details?id=com.deriv.dp2p"
+                                            to={p2p_playstore_url}
                                             target="_blank"
                                             size={24}
                                             color="red"
diff --git a/src/pages/p2p/components/_dp2p.js b/src/pages/p2p/components/_dp2p.js
index a037cb03b29..de0e6193fac 100644
--- a/src/pages/p2p/components/_dp2p.js
+++ b/src/pages/p2p/components/_dp2p.js
@@ -89,13 +89,13 @@ const Row = styled.div`
 `
 const query = graphql`
     query {
-        buy_sell: file(relativePath: { eq: "p2p_buy_sell.png" }) {
+        buy_sell: file(relativePath: { eq: "p2p/p2p_buy_sell.png" }) {
             ...fadeIn
         }
-        local_currency: file(relativePath: { eq: "p2p_local_currency.png" }) {
+        local_currency: file(relativePath: { eq: "p2p/p2p_local_currency.png" }) {
             ...fadeIn
         }
-        web_and_mobile: file(relativePath: { eq: "p2p_web_and_mobile.png" }) {
+        web_and_mobile: file(relativePath: { eq: "p2p/p2p_web_and_mobile.png" }) {
             ...fadeIn
         }
     }
diff --git a/src/pages/p2p/components/_hero.js b/src/pages/p2p/components/_hero.js
index 525355f9bb6..8801346b2f3 100644
--- a/src/pages/p2p/components/_hero.js
+++ b/src/pages/p2p/components/_hero.js
@@ -192,13 +192,15 @@ const HeroComponent = ({ title, content, background_data, img_data }) => {
 
 const query = graphql`
     query {
-        p2p_hero_background: file(relativePath: { eq: "p2p_hero_background.png" }) {
+        p2p_hero_background: file(relativePath: { eq: "p2p/p2p_hero_background.png" }) {
             ...fadeIn
         }
-        p2p_hero_background_mobile: file(relativePath: { eq: "p2p_hero_background_mobile.png" }) {
+        p2p_hero_background_mobile: file(
+            relativePath: { eq: "p2p/p2p_hero_background_mobile.png" }
+        ) {
             ...fadeIn
         }
-        p2p_hero_img: file(relativePath: { eq: "p2p_hero_img.png" }) {
+        p2p_hero_img: file(relativePath: { eq: "p2p/p2p_hero_img.png" }) {
             ...fadeIn
         }
     }
diff --git a/src/pages/p2p/components/_p2pbanner.js b/src/pages/p2p/components/_p2pbanner.js
index d787a1891d6..c28fe0c4854 100644
--- a/src/pages/p2p/components/_p2pbanner.js
+++ b/src/pages/p2p/components/_p2pbanner.js
@@ -94,10 +94,10 @@ const StyledHeader = styled(Header)`
 
 const query = graphql`
     query {
-        p2p_banner: file(relativePath: { eq: "p2p_banner.png" }) {
+        p2p_banner: file(relativePath: { eq: "p2p/p2p_banner.png" }) {
             ...fadeIn
         }
-        p2p_banner_mobile: file(relativePath: { eq: "p2p_banner_mobile.png" }) {
+        p2p_banner_mobile: file(relativePath: { eq: "p2p/p2p_banner_mobile.png" }) {
             ...fadeIn
         }
     }