fix: merge new conflicts

binary-com · Sep 12, 2023 · abeb08d · abeb08d
2 parents b798d18 + f5517c9
commit abeb08d
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 42 deletions.
diff --git a/crowdin/messages.json b/crowdin/messages.json
@@ -3085,7 +3085,7 @@
   "-1101838164": "A feature-rich",
   "-319509090": "CFD trading",
   "-76418992": "Deriv ctrader logo",
-  "-1660789683": "coming soon",
+  "-700260448": "demo",
   "-1006826644": "<0>Sign in</0> to your Deriv account. If you don’t have one, <1>sign up</1> for free.",
   "-1864840861": "Under CFDs, look for Deriv cTrader and select Get.",
   "-706898598": "Go to the Trader’s hub and choose the Real option.",
@@ -4516,4 +4516,4 @@
   "-1773685845": "All markets and platforms",
   "-661813412": "Enjoy full access to all our markets and platforms.",
   "-1520902282": "No credit card needed"
-}
+}
diff --git a/src/features/components/atoms/tab/tab-switcher/index.tsx b/src/features/components/atoms/tab/tab-switcher/index.tsx
@@ -8,7 +8,7 @@ import * as styles from './tab-switcher.module.scss'
 import { Localize } from 'components/localization'
 import dclsx from 'features/utils/dclsx'
 
-const TabSwitcher = ({ tab, onTabClick }: Omit<StepperTabTypes, 'items'>) => {
+const TabSwitcher = ({ tab, onTabClick, is_ctrader = false }: Omit<StepperTabTypes, 'items'>) => {
     return (
         <FlexBoxContainer
             direction={'col'}
@@ -29,18 +29,22 @@ const TabSwitcher = ({ tab, onTabClick }: Omit<StepperTabTypes, 'items'>) => {
                         <Localize translate_text={'_t_Demo account _t_'} />
                     </Typography.Paragraph>
                 </TabButton>
-                <TabButton
-                    className={dclsx(
-                        tab === 'real' ? styles.tab_switcher_active : styles.tab_switcher_unactive,
-                        styles.real_tab_button,
-                    )}
-                    style={{ background: 'transparent' }}
-                    onClick={() => onTabClick('real')}
-                >
-                    <Typography.Paragraph size={'xlarge'} align={'center'}>
-                        <Localize translate_text={'_t_Real account _t_'} />
-                    </Typography.Paragraph>
-                </TabButton>
+                {!is_ctrader && (
+                    <TabButton
+                        className={dclsx(
+                            tab === 'real'
+                                ? styles.tab_switcher_active
+                                : styles.tab_switcher_unactive,
+                            styles.real_tab_button,
+                        )}
+                        style={{ background: 'transparent' }}
+                        onClick={() => onTabClick('real')}
+                    >
+                        <Typography.Paragraph size={'xlarge'} align={'center'}>
+                            <Localize translate_text={'_t_Real account _t_'} />
+                        </Typography.Paragraph>
+                    </TabButton>
+                )}
             </FlexBox.Box>
         </FlexBoxContainer>
     )

diff --git a/src/features/components/atoms/tab/types.ts b/src/features/components/atoms/tab/types.ts
@@ -14,4 +14,5 @@ export type StepperTabTypes = {
     tab?: string
     onTabClick: (step: 'demo' | 'real' | number) => void
     direction?: TFlexDirection
+    is_ctrader?: boolean
 }
diff --git a/src/features/components/templates/banners/deriv-products-hero/index.tsx b/src/features/components/templates/banners/deriv-products-hero/index.tsx
@@ -10,12 +10,9 @@ import TradeHeroContainer from 'features/components/templates/hero-banners/trade
 
 interface DerivProductHeroType {
     contentData: DerivProductContentType
-    is_ctrader_hide: boolean
 }
 
 const DerivProductHero = ({ contentData }: DerivProductHeroType) => {
-    const is_ctrader_live = false
-
     return (
         <TradeHeroContainer
             container={'fixed'}
@@ -35,9 +32,7 @@ const DerivProductHero = ({ contentData }: DerivProductHeroType) => {
             >
                 <ProductsLogoAndText contentData={contentData} />
                 <ProductsHeading title={contentData.main_title} />
-                {is_ctrader_live && (
-                    <ProductsButtons feature_buttons={contentData.feature_buttons} />
-                )}
+                <ProductsButtons feature_buttons={contentData.feature_buttons} />
             </FlexBox.Box>
             <ProductsBanner contentData={contentData} />
         </TradeHeroContainer>

diff --git a/src/features/components/templates/banners/deriv-products-hero/products-logo-and-text.tsx b/src/features/components/templates/banners/deriv-products-hero/products-logo-and-text.tsx
@@ -8,17 +8,17 @@ interface ProductsLogoTextProps {
 }
 
 const ProductsLogoAndText = ({ contentData }: ProductsLogoTextProps) => {
-    const { mobile_logo, logo, coming_soon_icon, mobile_coming_soon_icon } = contentData
+    const { mobile_logo, logo, demo_icon, mobile_demo_icon } = contentData
 
     return (
         <FlexBox.Box className={hero_image} justify="start">
             <FlexBox.Box visible="phone-and-tablet" align="center" gap="4x">
                 {mobile_logo}
-                {mobile_coming_soon_icon}
+                {mobile_demo_icon}
             </FlexBox.Box>
-            <FlexBox.Box visible="larger-than-tablet" align="center" gap="12x">
+            <FlexBox.Box visible="larger-than-tablet" align="center" gap="4x">
                 {logo}
-                {coming_soon_icon}
+                {demo_icon}
             </FlexBox.Box>
         </FlexBox.Box>
     )

diff --git a/src/features/components/templates/banners/deriv-products-hero/types.ts b/src/features/components/templates/banners/deriv-products-hero/types.ts
@@ -6,8 +6,8 @@ export type DerivProductContentType = {
     hero: ReactElement
     hero_mobile: ReactElement
     logo: ReactElement
-    coming_soon_icon: ReactElement
-    mobile_coming_soon_icon: ReactElement
+    demo_icon: ReactElement
+    mobile_demo_icon: ReactElement
     mobile_logo: ReactElement
     product_water_mark_logo?: ReactElement
     product_water_mark_logo_mobile?: ReactElement

diff --git a/src/features/components/templates/tabs/stepper/index.tsx b/src/features/components/templates/tabs/stepper/index.tsx
@@ -2,10 +2,10 @@ import React from 'react'
 import Tab from '../../../atoms/tab'
 import { StepperTabTypes } from 'features/components/atoms/tab/types'
 
-const TabStepper = ({ items, onTabClick, tab }: StepperTabTypes) => {
+const TabStepper = ({ items, onTabClick, tab, is_ctrader }: StepperTabTypes) => {
     return (
         <>
-            <Tab.Switcher tab={tab} onTabClick={onTabClick} />
+            <Tab.Switcher tab={tab} onTabClick={onTabClick} is_ctrader={is_ctrader || false} />
             <Tab.Content items={items} onTabClick={onTabClick} />
         </>
     )

diff --git a/src/features/pages/deriv-ctrader/hero-banner/data.tsx b/src/features/pages/deriv-ctrader/hero-banner/data.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { StaticImage } from 'gatsby-plugin-image'
 import Image from 'features/components/atoms/image'
 import CTraderLogo from 'images/svg/trading-platforms/ctrader/ctrader-logo.svg'
-import ComingSoonLogo from 'images/svg/trading-platforms/ctrader/coming_soon.svg'
+import DemoLogo from 'images/svg/trading-platforms/ctrader/demo_ctrader.svg'
 import { DerivProductContentType } from 'features/components/templates/banners/deriv-products-hero/types'
 
 export const hero_content_data: DerivProductContentType = {
@@ -31,10 +31,6 @@ export const hero_content_data: DerivProductContentType = {
     ),
     logo: <Image src={CTraderLogo} height={64} alt={'_t_Deriv ctrader logo_t_'} />,
     mobile_logo: <Image src={CTraderLogo} height={32} alt={'_t_Deriv ctrader logo_t_'} />,
-    coming_soon_icon: (
-        <Image src={ComingSoonLogo} height={28} width={101} alt={'_t_coming soon_t_'} />
-    ),
-    mobile_coming_soon_icon: (
-        <Image src={ComingSoonLogo} height={24} width={89} alt={'_t_coming soon_t_'} />
-    ),
+    demo_icon: <Image src={DemoLogo} height={28} width={55} alt={'_t_demo_t_'} />,
+    mobile_demo_icon: <Image src={DemoLogo} height={24} width={49} alt={'_t_demo_t_'} />,
 }
diff --git a/src/features/pages/deriv-ctrader/how-to-start/index.tsx b/src/features/pages/deriv-ctrader/how-to-start/index.tsx
@@ -21,13 +21,19 @@ const HowToStartCTrader = () => {
 
             <div className="visible-phone-and-tablet">
                 <TabStepper
+                    is_ctrader
                     tab={tab}
                     onTabClick={onTabClick}
                     items={trading_platform_start[`${tab}_mobile`]}
                 />
             </div>
             <div className="visible-larger-than-tablet">
-                <TabStepper tab={tab} onTabClick={onTabClick} items={trading_platform_start[tab]} />
+                <TabStepper
+                    is_ctrader
+                    tab={tab}
+                    onTabClick={onTabClick}
+                    items={trading_platform_start[tab]}
+                />
             </div>
         </FlexBoxContainer>
     )

diff --git a/src/features/pages/deriv-ctrader/index.tsx b/src/features/pages/deriv-ctrader/index.tsx
@@ -30,9 +30,9 @@ const DerivCTrader = () => {
             <CTraderTradeDescription />
             <CTraderWhyTrade />
             <CTraderTradeFeatures />
+            <HowToStartCTrader />
             {is_ctrader && (
                 <>
-                    <HowToStartCTrader />
                     <CTraderPlatformBanner />
                 </>
             )}

diff --git a/src/images/svg/trading-platforms/ctrader/coming_soon.svg b/src/images/svg/trading-platforms/ctrader/coming_soon.svg