fix: merge changes

aswathy-deriv · Apr 19, 2024 · 12857b6 · 12857b6
1 parent 260411c
commit 12857b6
Showing 1 changed file with 56 additions and 23 deletions.
diff --git a/themes/gatsby-theme-deriv/src/pages/deriv-go/_banner.tsx b/themes/gatsby-theme-deriv/src/pages/deriv-go/_banner.tsx
@@ -1,30 +1,36 @@
 import React from 'react'
 import styled from 'styled-components'
 import { StaticImage } from 'gatsby-plugin-image'
-import {StyledHeaderForPlatform} from 'components/elements/common-header-section'
+import { StyledHeaderForPlatform } from 'components/elements/common-header-section'
 import DerivGOLogo from 'images/svg/deriv-go/deriv-go-banner-logo.svg'
 import device from 'themes/device'
 import useHandleSignup from 'components/hooks/use-handle-signup'
 import useAuthCheck from 'components/hooks/use-auth-check'
-import { handleGetTrading } from 'components/custom/utils'
+import useBreakpoints from 'components/hooks/use-breakpoints'
 import Shape from 'components/custom/_hero-shape'
 import Button from 'components/custom/_button'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import { Container } from 'components/containers'
 import { breakpoints } from 'themes/theme.breakpoints'
+import { mobileOSDetect } from 'common/os-detect'
+import {
+    deriv_go_huaweiappgallery_url,
+    deriv_go_ios_url,
+    deriv_go_playstore_url,
+} from 'common/constants'
 
 //TODO: (deriv-rebranding) to make the content section reusable .
 
 const ImageWrapper = styled.div`
     flex: 1;
     justify-content: center;
-    &.mobile-img{
+    &.mobile-img {
         display: none;
         @media ${device.tablet} {
             display: flex;
         }
     }
-    &.tablet-img{
+    &.tablet-img {
         display: none;
         @media ${breakpoints.sm} {
             display: flex;
@@ -33,9 +39,9 @@ const ImageWrapper = styled.div`
             display: flex;
         }
     }
-    &.desktop-img{
+    &.desktop-img {
         display: none;
-        @media screen and (min-width: 1201px ) {
+        @media screen and (min-width: 1201px) {
             display: flex;
         }
     }
@@ -129,6 +135,36 @@ const DHero = () => {
     const handleSignup = useHandleSignup()
     const [is_logged_in] = useAuthCheck()
     const is_rtl = useIsRtl()
+    const { is_mobile } = useBreakpoints()
+
+    const handleGetTradingDesktop = () => {
+        const targetComponent = document.getElementById('target-component')
+        if (targetComponent) {
+            targetComponent.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+    }
+
+    const handleGetTradingMobile = () => {
+        const os = mobileOSDetect()
+
+        switch (os) {
+            case 'Android':
+                window.open('https://play.google.com/store/apps/details?id=com.deriv.app', '_blank')
+                window.open(deriv_go_playstore_url, '_blank')
+                break
+            case 'iOS':
+                window.open(
+                    'https://apps.apple.com/my/app/deriv-go-online-trading-app/id1550561298',
+                    '_blank',
+                )
+                window.open(deriv_go_ios_url, '_blank')
+
+                break
+            case 'Huawei':
+                window.open('https://appgallery.huawei.com/app/C103801913', '_blank')
+                window.open(deriv_go_huaweiappgallery_url, '_blank')
+        }
+    }
 
     return (
         <BackgroundStyle>
@@ -138,7 +174,7 @@ const DHero = () => {
                         <StyledTradingLogin src={DerivGOLogo} alt="Deriv Go" />
                         <StyledHeaderForPlatform
                             title="_t_A trading platform for on-the-go traders_t_"
-                            title_font_size='64px'
+                            title_font_size="64px"
                             font_family_title={
                                 is_rtl ? 'Noto Sans, sans-serif' : 'Ubuntu, sans-serif'
                             }
@@ -148,7 +184,9 @@ const DHero = () => {
                         <BannerButtonWrapper>
                             {is_logged_in ? (
                                 <CreateAccountButton
-                                    onClick={handleGetTrading}
+                                    onClick={
+                                        is_mobile ? handleGetTradingMobile : handleGetTradingDesktop
+                                    }
                                     label="_t_Get Trading_t_"
                                     primary
                                     mobileFullWidth
@@ -165,21 +203,16 @@ const DHero = () => {
                     </Content>
                 </ContentWrapperStyle>
                 <HeroImageWrapper>
-                    <Shape
-                        angle={163}
-                        angle_mobile={101}
-                        width={'60%'}
-                        width_tablet='55%'
-                    >
-                        <ImageWrapper className='mobile-img'>
-                        <StaticImage
-                            src="../../images/common/deriv-go/deriv-go-mobile.png"
-                            loading="eager"
-                            formats={['avif', 'webp', 'auto']}
-                            alt="banner"
-                        />
+                    <Shape angle={163} angle_mobile={101} width={'60%'} width_tablet="55%">
+                        <ImageWrapper className="mobile-img">
+                            <StaticImage
+                                src="../../images/common/deriv-go/deriv-go-mobile.png"
+                                loading="eager"
+                                formats={['avif', 'webp', 'auto']}
+                                alt="banner"
+                            />
                         </ImageWrapper>
-                        <ImageWrapper className='tablet-img'>
+                        <ImageWrapper className="tablet-img">
                             <StaticImage
                                 src="../../images/common/deriv-go/banner_image_tablet.png"
                                 loading="eager"
@@ -188,7 +221,7 @@ const DHero = () => {
                                 imgStyle={{ objectFit: 'contain' }}
                             />
                         </ImageWrapper>
-                        <ImageWrapper className='desktop-img'>
+                        <ImageWrapper className="desktop-img">
                             <StaticImage
                                 src="../../images/common/deriv-go/banner_image.png"
                                 loading="eager"