Merge branch 'master' of github.com:binary-com/deriv-com into mayuran…

…/accumulator_video
binary-com · Apr 2, 2024 · 02fed99 · 02fed99
2 parents d83df5b + a2c3005
commit 02fed99
Show file tree

Hide file tree

Showing 52 changed files with 486 additions and 295 deletions.
diff --git a/.github/workflows/beta.yml b/.github/workflows/beta.yml
@@ -24,6 +24,7 @@ env:
     GATSBY_RUDDERSTACK_PRODUCTION_KEY: ${{ secrets.GATSBY_RUDDERSTACK_PRODUCTION_KEY }}
     GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
     GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+    GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
 jobs:
     release-beta:

diff --git a/.github/workflows/generate-preview-link-eu.yml b/.github/workflows/generate-preview-link-eu.yml
@@ -81,6 +81,7 @@ jobs:
                   GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
                   GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
                   GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+                  GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
               run: npm run build:eu
 

diff --git a/.github/workflows/generate-preview-link-row.yml b/.github/workflows/generate-preview-link-row.yml
@@ -83,6 +83,7 @@ jobs:
                   GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
                   GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
                   GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+                  GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
               run: npm run build:row
 

diff --git a/.github/workflows/generate-preview-link.yml b/.github/workflows/generate-preview-link.yml
@@ -90,6 +90,7 @@ jobs:
                   GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
                   GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
                   GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+                  GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
               run: npm run build
 

diff --git a/.github/workflows/production-eu.yml b/.github/workflows/production-eu.yml
@@ -21,6 +21,7 @@ env:
     GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
     GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
     GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+    GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
 jobs:
     release-production:

diff --git a/.github/workflows/production-row.yml b/.github/workflows/production-row.yml
@@ -21,6 +21,7 @@ env:
     GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
     GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
     GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+    GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
 jobs:
     release-production:

diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
@@ -21,6 +21,7 @@ env:
     GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
     GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
     GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+    GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
 jobs:
     release-production:

diff --git a/.github/workflows/staging-eu.yml b/.github/workflows/staging-eu.yml
@@ -26,6 +26,7 @@ env:
     GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
     GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
     GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+    GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
 jobs:
     release-staging:

diff --git a/.github/workflows/staging-row.yml b/.github/workflows/staging-row.yml
@@ -26,6 +26,7 @@ env:
     GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
     GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
     GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+    GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
 jobs:
     release-staging:

diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
@@ -26,6 +26,7 @@ env:
     GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID: ${{ secrets.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID }}
     GATSBY_TRUSTPILOT_API_KEY: ${{ secrets.GATSBY_TRUSTPILOT_API_KEY }}
     GATSBY_HOTJAR_ID: ${{ secrets.GATSBY_HOTJAR_ID }}
+    GATSBY_DATABASE_URL: ${{ secrets.GATSBY_DATABASE_URL }}
 
 jobs:
     release-staging:

diff --git a/themes/gatsby-theme-deriv/src/components/custom/_dhero-dmt5.tsx b/themes/gatsby-theme-deriv/src/components/custom/_dhero-dmt5.tsx
@@ -2,10 +2,9 @@ import React from 'react'
 import styled from 'styled-components'
 import { StaticImage } from 'gatsby-plugin-image'
 import { handleRedirectToTradersHub } from './utils'
-import CommonHeaderSection from 'components/elements/common-header-section'
+import {StyledHeaderForPlatform} from 'components/elements/common-header-section'
 import DerivMT5Logo from 'images/svg/dmt5/dmt5-banner-logo.svg'
 import device from 'themes/device'
-import useBreakpoints from 'components/hooks/use-breakpoints'
 import useHandleSignup from 'components/hooks/use-handle-signup'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import Shape from 'components/custom/_hero-shape'
@@ -14,6 +13,7 @@ import { useIsRtl } from 'components/hooks/use-isrtl'
 import { Container } from 'components/containers'
 import { localize } from 'components/localization'
 import useBuildVariant from 'features/hooks/use-build-variant'
+import useBreakpoints from 'components/hooks/use-breakpoints'
 
 //TODO: (deriv-rebranding) to make the content section reusable .
 
@@ -126,7 +126,7 @@ const StyledContainer = styled(Container)`
 `
 
 const DCommonBanner = () => {
-    const { is_mobile } = useBreakpoints()
+    const is_mobile = useBreakpoints()
     const handleSignup = useHandleSignup()
     const [is_logged_in] = useAuthCheck()
     const { region } = useBuildVariant()
@@ -138,9 +138,9 @@ const DCommonBanner = () => {
                 <ContentWrapperStyle is_rtl={is_rtl}>
                     <Content>
                         <StyledTradingLogin src={DerivMT5Logo} alt={localize('_t_Deriv MT5_t_')} />
-                        <CommonHeaderSection
+                        <StyledHeaderForPlatform
                             title="_t_The all-in-one CFD trading platform_t_"
-                            title_font_size={is_mobile ? '32px' : '64px'}
+                            title_font_size='64px'
                             color="var(--color-black-9)"
                             font_family_title={
                                 is_rtl ? 'Noto Sans, sans-serif' : 'Ubuntu, sans-serif'
@@ -168,8 +168,10 @@ const DCommonBanner = () => {
                 </ContentWrapperStyle>
                 <HeroImageWrapper>
                     <Shape
-                        angle={is_mobile ? 101 : 194}
-                        width={is_mobile ? '55%' : '60%'}
+                        angle={194}
+                        angle_mobile={101}
+                        width='60%'
+                        width_mobile='55%'
                         color="#0364B9"
                     >
                         <ImageWrapper>

diff --git a/themes/gatsby-theme-deriv/src/components/custom/_dhero.tsx b/themes/gatsby-theme-deriv/src/components/custom/_dhero.tsx
@@ -1,20 +1,21 @@
 import React from 'react'
 import styled from 'styled-components'
 import { StaticImage } from 'gatsby-plugin-image'
+import { useMediaQuery } from 'usehooks-ts'
 import Shape from './_hero-shape'
 import Button from './_button'
 import { handleGetTrading } from './utils'
-import CommonHeaderSection from 'components/elements/common-header-section'
+import {StyledHeaderForPlatform} from 'components/elements/common-header-section'
 import DerivTLogo from 'images/svg/dtrader/deriv-trader-banner-logo.svg'
 import device from 'themes/device'
-import useBreakpoints from 'components/hooks/use-breakpoints'
 import useHandleSignup from 'components/hooks/use-handle-signup'
 import useAuthCheck from 'components/hooks/use-auth-check'
 import { LinkButton } from 'components/form'
 import { Localize, localize } from 'components/localization'
 import { Container } from 'components/containers'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import useBuildVariant from 'features/hooks/use-build-variant'
+import { breakpoints } from 'themes/theme.breakpoints'
 
 type DHeroProps = {
     is_live_demo?: boolean
@@ -156,7 +157,7 @@ const StyledContainer = styled(Container)`
 
 const DHero = ({ join_us_for_free, is_live_demo, image_name }: DHeroProps) => {
     const getLinkType = () => (image_name === 'dbot' ? 'dbot' : 'deriv_app')
-    const { is_mobile } = useBreakpoints()
+    const is_mobile = useMediaQuery(breakpoints.xs)
     const {region} = useBuildVariant()
     const handleSignup = useHandleSignup()
     const [is_logged_in] = useAuthCheck()
@@ -173,9 +174,9 @@ const DHero = ({ join_us_for_free, is_live_demo, image_name }: DHeroProps) => {
                             src={DerivTLogo}
                             alt={localize('_t_Deriv Trader_t_')}
                         />
-                        <CommonHeaderSection
+                        <StyledHeaderForPlatform
                             title="_t_A user-friendly trading platform_t_"
-                            title_font_size={`${is_mobile ? 32 : 64}px`}
+                            title_font_size='64px'
                             font_family_title={
                                 is_rtl ? 'Noto Sans, sans-serif' : 'Ubuntu, sans-serif'
                             }
@@ -214,7 +215,7 @@ const DHero = ({ join_us_for_free, is_live_demo, image_name }: DHeroProps) => {
                     </Content>
                 </ContentWrapperStyle>
                 <HeroImageWrapper>
-                    <Shape angle={is_mobile ? 101 : 193} width="60%">
+                    <Shape angle={193} angle_mobile={101} width="60%">
                         <ImageWrapper>
                             <ImageStyle>
                                 {region === "eu" ? (

diff --git a/themes/gatsby-theme-deriv/src/components/custom/_hero-shape.tsx b/themes/gatsby-theme-deriv/src/components/custom/_hero-shape.tsx
@@ -1,12 +1,16 @@
 import React, { ReactNode } from 'react'
 import styled from 'styled-components'
+import { breakpoints } from 'themes/theme.breakpoints'
 
 type TProps = {
     color?: string
     angle?: number
     src?: string
     width?: string
     children?: ReactNode
+    angle_mobile?: number
+    width_mobile?: string
+    width_tablet?: string
 }
 
 const ContainerStyle = styled.div`
@@ -16,26 +20,38 @@ const ContainerStyle = styled.div`
     display: flex;
     position: relative;
 `
-const ShapeStyle = styled.div<Pick<TProps, 'angle'>>`
+const ShapeStyle = styled.div<Pick<TProps, 'angle' | 'angle_mobile'>>`
     position: absolute;
     left: -50%;
     top: -50%;
     width: 200%;
     height: 200%;
     transform-origin: center;
     transform: rotate(${({ angle }) => angle}deg);
+    @media ${breakpoints.xs} {
+        transform: rotate(${({ angle_mobile }) => angle_mobile}deg);
+    }
 `
-const BackgroundStyle = styled.div<Pick<TProps, 'color' | 'width'>>`
+const BackgroundStyle = styled.div<Pick<TProps, 'color' | 'width' | 'width_mobile' | 'width_tablet'>>`
     background-color: ${({ color }) => color};
     width: ${({ width }) => width};
     height: 100%;
+    @media ${breakpoints.xs} {
+        width: ${({ width_mobile }) => width_mobile};
+    }
+    @media ${breakpoints.sm} {
+        width: ${({ width_tablet }) => width_tablet};
+    }
+    @media ${breakpoints.md} {
+        width: ${({ width_tablet }) => width_tablet};
+    }
 `
 
-const Shape: React.FC<TProps> = ({ color = '#FF444F', angle = 0, width = '50%', children }) => {
+const Shape: React.FC<TProps> = ({ color = '#FF444F', angle = 0, angle_mobile = 0, width = '50%', width_mobile, width_tablet, children }) => {
     return (
         <ContainerStyle>
-            <ShapeStyle angle={angle}>
-                <BackgroundStyle color={color} width={width}></BackgroundStyle>
+            <ShapeStyle angle={angle} angle_mobile={angle_mobile}>
+                <BackgroundStyle color={color} width={width} width_mobile={width_mobile} width_tablet={width_tablet}></BackgroundStyle>
             </ShapeStyle>
             {children}
         </ContainerStyle>

diff --git a/themes/gatsby-theme-deriv/src/components/custom/_stepper_view.tsx b/themes/gatsby-theme-deriv/src/components/custom/_stepper_view.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Localize } from 'components/localization'
 import device from 'themes/device'
@@ -8,6 +8,7 @@ type TStepperViewItem = {
     title: () => TString
     title_components?: () => React.ReactElement[]
     image: () => JSX.Element
+    image_mobile?: () => ReactElement
 }
 
 type TStepperView = {
@@ -83,6 +84,18 @@ const ImageInnerBox = styled.div<ImageWrapperProps>`
     max-width: ${(props) => (props.width ? props.width : 'inherit')};
     width: 100%;
     margin: 0 auto;
+    &.mobile_img{
+        display: none;
+        @media screen and (max-width: 992px ) {
+            display: block;
+        }
+    }
+    &.desktop_img{
+        display: block;
+        @media screen and (max-width: 992px ) {
+            display: none;
+        }
+    }
 `
 
 const StepperView = ({
@@ -108,7 +121,15 @@ const StepperView = ({
     return (
         <Wrapper reverse={reverse} gap={gap}>
             <ImageWrapper>
-                <ImageInnerBox width={imageWidth}>{items[selected]?.image()}</ImageInnerBox>
+                {items[selected]?.image_mobile ? (
+                    <>
+                        <ImageInnerBox width={imageWidth} className='desktop_img'>{items[selected]?.image()}</ImageInnerBox>
+                        <ImageInnerBox width={imageWidth} className='mobile_img'>{items[selected]?.image_mobile()}</ImageInnerBox>
+                    </>
+                ): (
+                    <ImageInnerBox width={imageWidth}>{items[selected]?.image()}</ImageInnerBox>
+                )}
+
             </ImageWrapper>
             <ItemsWrapper width={contentWidth}>
                 <UlStyle>

diff --git a/themes/gatsby-theme-deriv/src/components/elements/common-header-section.tsx b/themes/gatsby-theme-deriv/src/components/elements/common-header-section.tsx
@@ -3,8 +3,11 @@ import styled from 'styled-components'
 import { TString } from 'types/generics'
 import { Flex } from 'components/containers'
 import { Localize } from 'components/localization'
+import device from 'themes/device'
+import { breakpoints } from 'themes/theme.breakpoints'
 
 type CommonHeaderSectionProps = {
+    className?: string;
     title?: TString
     subtitle?: TString
     subtitle_components?: React.ReactElement[]
@@ -66,6 +69,7 @@ const StyledSubtitle = styled.p<CommonHeaderSectionProps>`
 `
 
 const CommonHeaderSection = ({
+    className,
     title,
     subtitle,
     subtitle_components,
@@ -109,6 +113,7 @@ const CommonHeaderSection = ({
                         line_height={line_height}
                         font_weight_title={font_weight_title}
                         font_family_title={font_family_title}
+                        className={className}
                     >
                         <Localize translate_text={title} />
                     </StyledTitle>
@@ -131,4 +136,44 @@ const CommonHeaderSection = ({
         </StyledCommonHeaderSection>
     )
 }
+
+export const StyledHeaderForPlatform = styled(CommonHeaderSection)`
+    @media ${device.tablet} {
+        font-size: 32px;
+    }
+`;
+
+export const StyledHeaderForDerivxHero = styled(CommonHeaderSection)`
+    @media ${device.tablet} {
+        font-size: 32px;
+        margin: 0 0 5px 0;
+    }
+`;
+
+export const StyledHeaderForDownloadApp = styled(CommonHeaderSection)`
+    @media ${breakpoints.md} {
+        font-size: 32px;
+        line-height: 50px;
+        text-align: center;
+        margin: 0px;
+    }
+    @media ${device.tablet} {
+        font-size: 32px;
+        line-height: 50px;
+        text-align: center;
+        margin: 0px;
+    }
+`;
+
+export const StyledHeaderForDmt5DownloadApp = styled(CommonHeaderSection)`
+    @media ${breakpoints.md} {
+        font-size: 32px;
+        text-align: center;
+    }
+    @media ${device.tablet} {
+        font-size: 32px;
+        text-align: center;
+    }
+`;
+
 export default CommonHeaderSection