binary-com
diff --git a/‎crowdin/messages.json
Lines changed: 1 addition & 1 deletion b/‎crowdin/messages.json
Lines changed: 1 addition & 1 deletion
diff --git a/‎gatsby-browser.js
Lines changed: 1 addition & 1 deletion b/‎gatsby-browser.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/common/country-base.js
Lines changed: 34 additions & 0 deletions b/‎src/common/country-base.js
Lines changed: 34 additions & 0 deletions
diff --git a/‎src/common/os-detect.js
Lines changed: 20 additions & 2 deletions b/‎src/common/os-detect.js
Lines changed: 20 additions & 2 deletions
diff --git a/‎src/common/utility.js
Lines changed: 7 additions & 0 deletions b/‎src/common/utility.js
Lines changed: 7 additions & 0 deletions
diff --git a/‎src/components/custom/_dtrading.js
Lines changed: 1 addition & 1 deletion b/‎src/components/custom/_dtrading.js
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/components/elements/accordion.js
Lines changed: 14 additions & 7 deletions b/‎src/components/elements/accordion.js
Lines changed: 14 additions & 7 deletions
diff --git a/‎src/components/elements/background-image.js
Lines changed: 1 addition & 1 deletion b/‎src/components/elements/background-image.js
Lines changed: 1 addition & 1 deletion
@@ -4,7 +4,7 @@ import { WrapPagesWithLocaleContext } from './src/components/localization'
 import { isProduction, isLocalHost } from './src/common/websocket/config'
 import { CookieStorage, LocalStore } from './src/common/storage'
 import TrafficSource from './src/common/traffic-source'
-import isMobile from './src/common/os-detect'
+import { isMobile } from './src/common/os-detect'
 import { gtm_test_domain } from './src/common/utility'
 import { MediaContextProvider } from './src/themes/media'
 import { DerivProvider } from './src/store'
 
@@ -31,6 +31,40 @@ const eu_countries = [
     'mt',
 ]
 
+const p2p_allowed_countries = [
+    'ng',
+    'za',
+    'zw',
+    'tz',
+    'gh',
+    'zm',
+    'bw',
+    'na',
+    'ke',
+    'aq',
+    'so',
+    'pk',
+    'in',
+    'bd',
+    'ik',
+    'ci',
+    'ar',
+    'bo',
+    'cl',
+    'co',
+    'ec',
+    'gf',
+    'gy',
+    'py',
+    'pe',
+    'sr',
+    'uy',
+    've',
+]
+
 export const isEuCountry = (clients_country) => eu_countries.includes(clients_country)
 
+export const isP2PAllowedCountry = (clients_country) =>
+    p2p_allowed_countries.includes(clients_country)
+
 export const isUK = (clients_country) => clients_country === 'gb'
@@ -1,4 +1,22 @@
-const isMobile = () =>
+export const isMobile = () =>
     /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 
-export default isMobile
+export const mobileOSDetect = () => {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera
+
+    // Windows Phone must come first because its UA also contains "Android"
+    if (/windows phone/i.test(userAgent)) {
+        return 'Windows Phone'
+    }
+
+    if (/android/i.test(userAgent)) {
+        return 'Android'
+    }
+
+    // iOS detection from: http://stackoverflow.com/a/9039885/177710
+    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+        return 'iOS'
+    }
+
+    return 'unknown'
+}
@@ -105,6 +105,7 @@ const trimSpaces = (value) => value.trim()
 
 const deriv_app_url = 'https://app.deriv.com'
 const deriv_bot_app_url = 'https://app.deriv.com/bot'
+const deriv_dp2p_app_url = 'https://app.deriv.com/cashier/p2p'
 const smarttrader_url = 'https://smarttrader.deriv.com'
 const binary_url = 'https://binary.com'
 const deriv_cookie_domain = 'deriv.com'
@@ -115,6 +116,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'
 
@@ -123,6 +125,8 @@ const dmt5_linux_url = 'https://www.metatrader5.com/en/terminal/help/start_advan
 const dmt5_android_url =
     'https://download.mql5.com/cdn/mobile/mt5/android?server=Deriv-Demo,Deriv-Server'
 const dmt5_ios_url = 'https://download.mql5.com/cdn/mobile/mt5/ios?server=Deriv-Demo,Deriv-Server'
+const dp2p_google_play_url =
+    'https://play.google.com/store/apps/details?id=com.deriv.dp2p&hl=en&gl=US'
 
 export {
     affiliate_signin_url,
@@ -136,6 +140,8 @@ export {
     community_url,
     deriv_app_url,
     deriv_bot_app_url,
+    deriv_dp2p_app_url,
+    dp2p_google_play_url,
     mga_link_url,
     debounce,
     brand_name,
@@ -162,4 +168,5 @@ export {
     toHashFormat,
     zoho_url,
     trimSpaces,
+    p2p_playstore_url,
 }
@@ -126,7 +126,7 @@ const DTrading = ({ trading, reverse, two_title }) => {
                             <ImageWrapper margin_right={!is_even ? '0' : '2.4rem'}>
                                 <QueryImage
                                     data={data[item.image_name]}
-                                    alt={data[item.image_alt]}
+                                    alt={item.image_alt}
                                     width="100%"
                                 />
                             </ImageWrapper>
 
@@ -65,11 +65,11 @@ const AccordionWrapper = styled.div`
 const TRANSITION_DURATION = 250
 
 // TODO: keyboard events and find a way to add proper focus handling
-const Accordion = ({ children, has_single_state, is_default_open }) => {
+const Accordion = ({ children, has_single_state, id, is_default_open }) => {
     const nodes = []
 
     return has_single_state ? (
-        <SingleAccordionContent is_default_open={is_default_open} nodes={nodes}>
+        <SingleAccordionContent id={id} is_default_open={is_default_open} nodes={nodes}>
             {children}
         </SingleAccordionContent>
     ) : (
@@ -79,11 +79,12 @@ const Accordion = ({ children, has_single_state, is_default_open }) => {
 Accordion.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     has_single_state: PropTypes.bool,
+    id: PropTypes.string,
     is_default_open: PropTypes.bool,
     nodes: PropTypes.array,
 }
 
-const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
+const ItemExpanded = ({ is_default_open, child, child_idx, nodes, id }) => {
     const getHeight = (active_idx) => {
         return (
             nodes[active_idx] &&
@@ -95,7 +96,7 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
         // set height to auto to allow content that can resize inside the accordion
         // reset height to content height before collapse for transition (height: auto does not support transitions)
         if (is_expanded) setTimeout(() => setHeight('auto'), 200)
-        else setTimeout(() => setHeight(0), 50)
+        else setHeight(0)
     })
 
     React.useEffect(() => {
@@ -110,6 +111,7 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
                 <ResponsiveWrapper
                     key={child_idx}
                     style={child.props.parent_style}
+                    id={id}
                     ref={(div) => {
                         nodes[child_idx] = { ref: div }
                     }}
@@ -168,11 +170,12 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
 ItemExpanded.propTypes = {
     child: PropTypes.any,
     child_idx: PropTypes.any,
+    id: PropTypes.string,
     is_default_open: PropTypes.bool,
     nodes: PropTypes.any,
 }
 
-const SingleAccordionContent = ({ is_default_open = false, nodes, children }) => {
+const SingleAccordionContent = ({ is_default_open = false, nodes, children, id }) => {
     const render_nodes = React.Children.map(children, (child, child_idx) => {
         return (
             <ItemExpanded
@@ -181,6 +184,7 @@ const SingleAccordionContent = ({ is_default_open = false, nodes, children }) =>
                 child={child}
                 child_idx={child_idx}
                 nodes={nodes}
+                id={id}
             />
         )
     })
@@ -190,6 +194,7 @@ const SingleAccordionContent = ({ is_default_open = false, nodes, children }) =>
 
 SingleAccordionContent.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    id: PropTypes.string,
     is_default_open: PropTypes.bool,
     nodes: PropTypes.array,
 }
@@ -280,19 +285,21 @@ const AccordionContent = ({ children, nodes }) => {
 AccordionContent.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     has_single_state: PropTypes.bool,
+    id: PropTypes.string,
     nodes: PropTypes.array,
 }
 
-const AccordionItem = ({ text, children, style }) => {
+const AccordionItem = ({ id, text, children, style }) => {
     return (
-        <div style={style} header={text}>
+        <div style={style} header={text} id={id}>
             {children}
         </div>
     )
 }
 
 AccordionItem.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    id: PropTypes.string,
     is_showed: PropTypes.bool,
     style: PropTypes.object,
     text: PropTypes.string,
 
@@ -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"
Original file line number	Diff line number	Diff line change
@@ -12,7 +12,7 @@ const StyledBackground = styled(BackgroundImage)`
`12`	`12`	`}`
`13`	`13`	`
`14`	`14`
`15`		`-const Background = ({ children, data, style, dark, ...props }) => {`
	`15`	`+export const Background = ({ children, data, style, dark, ...props }) => {`
`16`	`16`	`return (`
`17`	`17`	`<StyledBackground`
`18`	`18`	`Tag="div"`