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.

Sean / DP2P QR code #1206

Merged
merged 2 commits into from Nov 19, 2020
Merged

Sean / DP2P QR code #1206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be9bf38
feat: add QR code and desktop copywriting
Nov 18, 2020
354c395
moved p2p related assets into its own folder
Nov 18, 2020
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
2 changes: 2 additions & 0 deletions src/common/utility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -144,4 +145,5 @@ export {
toHashFormat,
zoho_url,
trimSpaces,
p2p_playstore_url,
}
0 src/images/common/p2p_banner.png → src/images/common/p2p/p2p_banner.png
View file
Open in desktop
File renamed without changes
0 src/images/common/p2p_banner_mobile.png → src/images/common/p2p/p2p_banner_mobile.png
View file
Open in desktop
File renamed without changes
0 src/images/common/p2p_buy_sell.png → src/images/common/p2p/p2p_buy_sell.png
View file
Open in desktop
File renamed without changes
0 src/images/common/p2p_hero_background.png → ...images/common/p2p/p2p_hero_background.png
View file
Open in desktop
File renamed without changes
0 ...ges/common/p2p_hero_background_mobile.png → ...common/p2p/p2p_hero_background_mobile.png
View file
Open in desktop
File renamed without changes
0 src/images/common/p2p_hero_img.png → src/images/common/p2p/p2p_hero_img.png
View file
Open in desktop
File renamed without changes
0 src/images/common/p2p_local_currency.png → src/images/common/p2p/p2p_local_currency.png
View file
Open in desktop
File renamed without changes
Binary file added src/images/common/p2p/p2p_playstore.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 src/images/common/p2p_web_and_mobile.png → src/images/common/p2p/p2p_web_and_mobile.png
View file
Open in desktop
File renamed without changes
100 changes: 81 additions & 19 deletions src/pages/p2p/components/_availability.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
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'
import { p2p_playstore_url } from 'common/utility'

const Row = styled.div`
display: flex;
Expand Down Expand Up @@ -79,13 +81,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;
Expand All @@ -102,7 +107,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/p2p_playstore.png" }) {
...fadeIn
}
}
`

const Availability = () => {
const data = useStaticQuery(query)
const handleLogin = () => {
Login.redirectToLogin()
}
Expand All @@ -116,7 +138,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"
Expand All @@ -130,7 +153,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>
Expand Down Expand Up @@ -169,24 +197,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={p2p_playstore_url}
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={p2p_playstore_url}
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." />
Expand Down
6 changes: 3 additions & 3 deletions src/pages/p2p/components/_dp2p.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
Expand Down
8 changes: 5 additions & 3 deletions src/pages/p2p/components/_hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/p2p/components/_p2pbanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
Expand Down