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.

Al-amin/35136/Deriv p2p landing page update #1906

Merged
suthesank merged 8 commits into from
Jul 19, 2021
Merged

Al-amin/35136/Deriv p2p landing page update #1906

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f2e1b1a
updating Deriv P2P landing page
Jul 8, 2021
27c3a89
added Deriv P2P articles on Help centre
Jul 8, 2021
c42f3dc
address PR comment
Jul 9, 2021
cad9a51
addressed QA comments
Jul 12, 2021
053ce73
handle youtube video mobile view
Jul 13, 2021
42441dd
updated P2P numbers card
Jul 14, 2021
03b93fd
updated the iframe mobile view
Jul 14, 2021
d0ecc4d
addressed PR comment
Jul 15, 2021
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/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@ export const map_api_key = 'AIzaSyAEha6-HeZuI95L9JWmX3m6o-AxQr_oFqU'
export const mga_link_url =
'https://authorisation.mga.org.mt/verification.aspx?lang=EN&company=a5fd1edc-d072-4c26-b0cd-ab3fa0f0cc40&details=1'
export const p2p_playstore_url = 'https://play.google.com/store/apps/details?id=com.deriv.dp2p'
export const p2p_applestore_url = 'https://apps.apple.com/us/app/deriv-dp2p/id1506901451'
export const p2p_huawei_appgallery_url = 'https://appgallery.huawei.com/#/app/C103844755'
export const pushwoosh_app_code = 'DD293-35A19'
export const sample_rate = 25
export const zoho_url = 'https://deriv.zohorecruit.com'
Expand Down
Binary file added src/images/common/p2p/p2p_all_appstores.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.
48 changes: 48 additions & 0 deletions src/pages/help-centre/_help-articles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,6 +458,54 @@ export const articles = [
],
},

{
category: <Localize translate_text="Deriv P2P" />,
articles: [
{
title: <Localize translate_text="What is Deriv P2P?" />,
category: 'Deriv P2P',
sub_category: <Localize translate_text="Platforms" />,
label: 'what-is-deriv-p2p',
},
{
title: <Localize translate_text="How secure is Deriv P2P?" />,
category: 'Deriv P2P',
sub_category: <Localize translate_text="Secure" />,
label: 'how-secure-deriv-p2p',
},
{
title: <Localize translate_text="What payment methods can I use with Deriv P2P?" />,
category: 'Deriv P2P',
sub_category: <Localize translate_text="Payment" />,
label: 'payment-methods',
},
{
title: <Localize translate_text="Can I increase my daily buy or sell limit?" />,
category: 'Deriv P2P',
sub_category: <Localize translate_text="Limit" />,
label: 'buy-or-sell-limit',
},
{
title: <Localize translate_text="What should I do if I have a dispute with the trader I’m dealing with?" />,
category: 'Deriv P2P',
sub_category: <Localize translate_text="Dispute" />,
label: 'dispute-with-the-trader',
},
{
title: <Localize translate_text="How do I get in touch with the counterparty of my transaction?" />,
category: 'Deriv P2P',
sub_category: <Localize translate_text="Transaction" />,
label: 'in-touch-with-the-counterparty',
},
{
title: <Localize translate_text="Why is my Deriv P2P balance different from my Deriv account balance?" />,
category: 'Deriv P2P',
sub_category: <Localize translate_text="Balance" />,
label: 'different-account-balance',
},
],
},

{
category: <Localize translate_text="Security" />,
articles: [
Expand Down
2 changes: 1 addition & 1 deletion src/pages/help-centre/_utility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@ export const splitArticles = (array, length) =>

export const euArticles = (array) => {
const second_array = [...array[1], array[2][0]]
return [array[0], second_array, [array[2][1]]]
return [array[0], second_array, [array[2][1]], [array[2][2]]]
}
168 changes: 168 additions & 0 deletions src/pages/help-centre/deriv-p2p.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
import React from 'react'
import { Article } from './_article'
import { ArticleWrapper, StyledHeader, StyledText } from './_help-centre-style'
import { Text } from 'components/elements'
import { localize, Localize, WithIntl } from 'components/localization'

const WhatisDerivP2P = () => (
<ArticleWrapper>
<StyledHeader as="h4">{localize('What is Deriv P2P?')}</StyledHeader>
<Text>
{localize(
'Deriv P2P is Deriv’s peer-to-peer deposit and withdrawal service that allows you to get money in and out of your Deriv account easily through transactions with fellow traders. ',
)}
</Text>
<StyledText>
{localize(
'To get money into your Deriv account, you can ‘buy’ Deriv funds in your local currency (or any supported currency) from a fellow trader and the amount you have ‘bought’ will be deposited into your account.',
)}
</StyledText>
<StyledText>
{localize(
'Similarly, you can make withdrawals from your Deriv account by ‘selling’ Deriv funds to fellow traders in return for payment in your local currency (or any supported currency).',
)}
</StyledText>
</ArticleWrapper>
)

const HowSecureDerivP2P = () => (
<ArticleWrapper>
<StyledHeader as="h4">
{
<Localize
translate_text="How secure is Deriv P2P?"
components={[<br key={0} />]}
/>
}
</StyledHeader>
<Text>
{localize(
'You can transfer money to fellow traders via bank transfers, cards, e-wallets, or any agreed upon payment method with the person you are dealing with.',
)}
</Text>
<StyledText>
{localize(
'Please note that Deriv has no control over payments made between Deriv P2P traders. So please ensure you follow the payment instructions as agreed between you and the trader you are dealing with, and provide your preferred method of payment and instructions when you post your ads.',
)}
</StyledText>
</ArticleWrapper>
)

const BuyOrSellLimit = () => (
<ArticleWrapper>
<StyledHeader as="h4">
{
<Localize
translate_text="Can I increase my daily buy or sell limit?"
components={[<br key={0} />]}
/>
}
</StyledHeader>
<Text>
{localize(
'Yes. You can request to increase your daily limit via live chat on our website and we’ll get back to you via email. ',
)}
</Text>
</ArticleWrapper>
)

const DisputeWithTheTrader = () => (
<ArticleWrapper>
<StyledHeader as="h4">
{
<Localize
translate_text="What should I do if I have a dispute with the trader I’m dealing with?"
components={[<br key={0} />]}
/>
}
</StyledHeader>
<Text>
{localize(
'You can chat with the trader you’re dealing with via the in-app chat to resolve the dispute. If both parties are unable to reach an agreement, you can reach out to us via the in-app dispute facility. We’ll get in touch with the relevant parties and work to resolve the dispute as quickly as possible.',
)}
</Text>
</ArticleWrapper>
)

const InTouchWithTheCounterparty = () => (
<ArticleWrapper>
<StyledHeader as="h4">
{
<Localize
translate_text="How do I get in touch with the counterparty of my transaction?"
components={[<br key={0} />]}
/>
}
</StyledHeader>
<Text>
{localize(
'You can chat with the trader you are dealing with via the in-app chat function.',
)}
</Text>
</ArticleWrapper>
)

const DifferentAccountBalance = () => (
<ArticleWrapper>
<StyledHeader as="h4">
{
<Localize
translate_text="Why is my Deriv P2P balance different from my Deriv account balance?"
components={[<br key={0} />]}
/>
}
</StyledHeader>
<Text>
{localize(
'Your Deriv P2P balance consists of a portion of your Deriv account balance. While all of your deposits via e-wallets and cryptocurrency are available for use with Deriv P2P, only a part of your deposits via cards are available.',
)}
</Text>
</ArticleWrapper>
)

const DerivP2PArticle = () => {
return (
<div>
<Article
header="Deriv P2P"
title={localize('Help Center | Frequently asked questions | Deriv P2P | Deriv')}
description={localize('Frequently asked questions - Deriv P2P')}
>
<WhatisDerivP2P text={localize('What is Deriv P2P?')} label="what-is-deriv-p2p" />
<HowSecureDerivP2P
text={localize(
'How secure is Deriv P2P?',
)}
label="how-secure-deriv-p2p"
/>
<BuyOrSellLimit
text={localize(
'Can I increase my daily buy or sell limit?',
)}
label="buy-or-sell-limit"
/>
<DisputeWithTheTrader
text={localize(
'What should I do if I have a dispute with the trader I’m dealing with?',
)}
label="dispute-with-the-trader"
/>
<InTouchWithTheCounterparty
text={localize(
'How do I get in touch with the counterparty of my transaction?',
)}
label="in-touch-with-the-counterparty"
/>
<DifferentAccountBalance
text={localize(
'Why is my Deriv P2P balance different from my Deriv account balance?',
)}
label="different-account-balance"
/>

</Article>
</div>
)
}

export default WithIntl()(DerivP2PArticle)
2 changes: 1 addition & 1 deletion src/pages/help-centre/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,7 @@ class HelpCentreClass extends Component {
can_expand &&
idxb === item.articles.length - 1
return (
<ListNoBullets key={idxb}>
<ListNoBullets key={idxb}>
{should_show_item && (
<li>
<StyledLink
Expand Down
52 changes: 42 additions & 10 deletions src/pages/p2p/components/_availability.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +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/constants'
import { p2p_playstore_url, p2p_applestore_url, p2p_huawei_appgallery_url } from 'common/constants'

const Row = styled.div`
display: flex;
Expand Down Expand Up @@ -118,7 +118,7 @@ const Right = styled.div`

const query = graphql`
query {
qr_code: file(relativePath: { eq: "p2p/p2p_playstore.png" }) {
qr_code: file(relativePath: { eq: "p2p/p2p_all_appstores.png" }) {
...fadeIn
}
}
Expand All @@ -139,7 +139,7 @@ const Availability = () => {
as="h2"
mb="4rem"
>
<Show.Desktop min_width="992">{localize('How to get DP2P')}</Show.Desktop>
<Show.Desktop min_width="992">{localize('How to get Deriv P2P')}</Show.Desktop>
<Show.Mobile>{localize('Available on desktop and mobile')}</Show.Mobile>
</StyledHeader>
<Flex
Expand All @@ -158,7 +158,7 @@ const Availability = () => {
<Localize translate_text="On your computer" />
</Show.Desktop>
<Show.Mobile>
<Localize translate_text="DP2P on your computer" />
<Localize translate_text="Deriv P2P on your computer" />
</Show.Mobile>
</StyledCardHeader>
</Row>
Expand All @@ -184,10 +184,10 @@ const Availability = () => {
/>
</StyledText>
<StyledText>
<Localize translate_text="2. Go to Cashier > DP2P and register." />
<Localize translate_text="2. Go to Cashier > Deriv P2P and register." />
</StyledText>
<StyledText>
<Localize translate_text="3. Start exchanging." />
<Localize translate_text="3. Start connecting with fellow traders to make deposits and withdrawals." />
</StyledText>
</div>
</PlatformCard>
Expand All @@ -212,7 +212,7 @@ const Availability = () => {
<Flex>
<Left>
<Localize
translate_text="1. Scan this QR code to download the app from the <0>Google Play Store</0>."
translate_text="1. Download Deriv P2P from the <0>Google Play Store</0>, Apple App Store <1>link to app in App Store</1>, or the Huawei AppGallery <2>link to app in AppGallery</2>."
components={[
<LocalizedLinkText
external
Expand All @@ -222,6 +222,22 @@ const Availability = () => {
color="red"
key={0}
/>,
<LocalizedLinkText
external
to={p2p_applestore_url}
target="_blank"
size={24}
color="red"
key={1}
/>,
<LocalizedLinkText
external
to={p2p_huawei_appgallery_url}
target="_blank"
size={24}
color="red"
key={2}
/>,
]}
/>
</Left>
Expand All @@ -237,7 +253,7 @@ const Availability = () => {
</Show.Desktop>
<Show.Mobile>
<Localize
translate_text="1. Get the app from the <0>Google Play Store</0>."
translate_text="1. Download Deriv P2P from the <0>Google Play Store</0>, Apple App Store <1>link to app in App Store</1>, or the Huawei AppGallery <2>link to app in AppGallery</2>."
components={[
<LocalizedLinkText
external
Expand All @@ -247,15 +263,31 @@ const Availability = () => {
color="red"
key={0}
/>,
<LocalizedLinkText
external
to={p2p_applestore_url}
target="_blank"
size={24}
color="red"
key={1}
/>,
<LocalizedLinkText
external
to={p2p_huawei_appgallery_url}
target="_blank"
size={24}
color="red"
key={2}
/>,
]}
/>
</Show.Mobile>
</StyledText>
<StyledText>
<Localize translate_text="2. Log in to your Deriv account, and register for DP2P." />
<Localize translate_text="2. Register for Deriv P2P by logging into your Deriv account in the app." />
</StyledText>
<StyledText>
<Localize translate_text="3. Start exchanging." />
<Localize translate_text="3. Start connecting with fellow traders to make deposits and withdrawals." />
</StyledText>
</div>
</PlatformCard>
Expand Down
Loading