fix: fixed conflicts

.github/workflows/production.yml

@@ -50,7 +50,8 @@ jobs:
             - run: npm run format
             - run: npm run test
             - run: npm run build
-
+            - run: echo $GIT_TAG_NAME > public/version.txt
+
             - name: Remove Storybook
               uses: JesseTG/[email protected]
               with:

.github/workflows/staging.yml

@@ -52,6 +52,8 @@ jobs:
             # - run: npm run test
             - run: npm run build
             # - run: npm run build:storybook
+            - run: echo $GITHUB_SHA > public/version.txt
+
             - uses: olegtarasov/[email protected]
               id: tagName
               # For using same tag for staging and production we need to uncomment these two below lines:

crowdin/messages.json

@@ -534,6 +534,7 @@
   "517286342": "<p>To place a vanilla options contract, you’ll need to:</p><ul><li>Select the underlying asset you want to trade.</li><li>Determine your contract duration or end time.</li><li>Predict the asset’s price movement by choosing Call or Put.</li><li>Select your preferred strike price</li><li>Enter your stake.</li><li>Purchase the contract</li></ul>",
   "517833647": "Volatility 50 (1s) Index",
   "517844699": "Alibaba Group Holding Ltd",
+  "518861708": "Open a demo Deriv MT5 or demo Deriv X account and practise with an unlimited amount of virtual funds.",
   "518906831": "Can I use the same address to make a cryptocurrency deposit?",
   "519988278": "Fox Corp Class B",
   "520136698": "Boom 500 Index",
@@ -587,7 +588,6 @@
   "564216330": "<0>1 lot</0> with 300 leverage:",
   "566274201": "1. Market",
   "567322404": "Antivirus",
-  "567501407": "Currently available on demo accounts only",
   "567739189": "Why do my Deriv MT5 positions always start with a loss?",
   "568729968": "responsive platform",
   "570656160": "You can use your Deriv MT5 demo account for as long as you want. However, if your account is inactive for 30 days, we'll deactivate it automatically.",
@@ -933,6 +933,7 @@
   "888978991": "Each of these indices replicates the performance of top publicly traded companies in financial markets in Europe.",
   "890646842": "White architecture building in Ipoh",
   "890667695": "45%",
+  "891650376": "Tiktok",
   "893607771": "Benefit from round-the-clock trading hours (Monday to Friday), high liquidity, low barriers to entry, a wide range of offerings, and opportunities to trade on world events.",
   "893980632": "Have more questions? Check out the <0>FAQ section</0> on the MQL5 website.",
   "894402947": "Fee per million",
@@ -1908,6 +1909,7 @@
   "1822982010": "<0>EFA.US</0> The iShares MSCI EAFE ETF tracks an index of large- and mid-capitalisation developed market equities outside of the US and Canada.",
   "1823119628": "the Vanuatu Financial Services Commission",
   "1823770507": "DOT/USD",
+  "1823821664": "Available on Demo accounts only",
   "1824094317": "24x7 trading",
   "1826550764": "Why choose us",
   "1826719972": "stock indices",
@@ -4155,16 +4157,16 @@
   "-2121510827": "Sweden",
   "-1357648282": "For fair resolution of any complaints, please <0>chat</0> with us. To learn more, see our <1>complaint policy</1>.",
   "-1838458999": "For fair resolution of any complaints, please <0>chat</0> with us.",
+  "-1131400885": "Deriv Investments (Europe) Limited",
+  "-1231248751": "Deriv Investments (Europe) Limited (Company No. C 70156), incorporated on the 22nd April 2015, is registered in Malta with its registered office located at Level 3, W Business Centre, Triq Dun Karm, Birkirkara BKR9033, Malta. Deriv Investments (Europe) Ltd is licensed in Malta and regulated by the Malta Financial Services Authority under the Investments Services Act <0>(view licence)</0> to provide investment services.",
+  "-2051445931": "Clients in the European Union who wish to trade financial instruments can have accounts under Deriv Investments (Europe) Limited.",
   "-1446148261": "CFDs - Forex",
   "-1121949345": "CFDs - Stock indices",
   "-33096025": "CFDs - Cryptocurrencies",
   "-2132026042": "CFDs - Commodities",
   "-1238176624": "CFDs - Synthetics: Volatility 250 (1s) Index",
   "-1076679821": "Multipliers - Cryptocurrencies",
   "-812435767": "Multipliers - Synthetics: Crash 300 Index",
-  "-1131400885": "Deriv Investments (Europe) Limited",
-  "-1231248751": "Deriv Investments (Europe) Limited (Company No. C 70156), incorporated on the 22nd April 2015, is registered in Malta with its registered office located at Level 3, W Business Centre, Triq Dun Karm, Birkirkara BKR9033, Malta. Deriv Investments (Europe) Ltd is licensed in Malta and regulated by the Malta Financial Services Authority under the Investments Services Act <0>(view licence)</0> to provide investment services.",
-  "-2051445931": "Clients in the European Union who wish to trade financial instruments can have accounts under Deriv Investments (Europe) Limited.",
   "-112814932": "Deriv (FX) Ltd",
   "-1269257733": "Clients in the rest of the world (except for restricted countries such as the USA, Canada, and Hong Kong) who wish to trade CFDs on forex and cryptocurrencies can have MT5 Financial STP accounts under Deriv (FX) Ltd.",
   "-2019617323": "Deriv (BVI) Ltd",
@@ -4254,9 +4256,6 @@
   "-943253121": "The term ‘margin’ refers to the deposit needed to open a leveraged position, which is a position larger than your capital investment and leads to increased market exposure.",
   "-339497727": "Trade types margin market",
   "-1009744297": "Use our margin calculator to calculate the margin required to increase your market exposure (the market value of your position) on Deriv’s CFD trading platforms.",
-  "-1603400333": "Open a demo CFDs account and practise with an unlimited amount of virtual funds.",
-  "-446423672": "Open a demo Deriv MT5, Deriv X, or Deriv cTrader account and practise with an unlimited amount of virtual funds.",
-  "-1978157334": "Trade with a real Deriv MT5, Deriv X, or Deriv cTrader account and get access to high leverage to trade positions larger than your existing capital.",
   "-1207172200": "Start trading CFDs on Deriv",
   "-1703690406": "When you trade CFDs on margin, you increase your market exposure, thus amplifying both your potential profit and potential loss.",
   "-843831637": "Stop loss",
@@ -4293,6 +4292,8 @@
   "-894512007": "favourite markets icon",
   "-252740007": "instant access icon",
   "-1156092900": "flexible icon",
+  "-1603400333": "Open a demo CFDs account and practise with an unlimited amount of virtual funds.",
+  "-1242544018": "Trade with a real Deriv MT5 or real Deriv X account and get access to high leverage to trade positions larger than your existing capital.",
   "-544150655": "Markets available for margin trading",
   "-867909844": "Access over 30 assets and also trade with up to 1:30 leverage and zero commission on trades.",
   "-309438223": "Trade synthetic indices on margin 24/7 without being affected by natural events and liquidity risks.",

gatsby-browser.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import { createRoot } from 'react-dom/client'
 import Cookies from 'js-cookie'
 import { isMobile } from 'react-device-detect'
 import { Analytics } from '@deriv/analytics'
@@ -165,11 +164,4 @@ export const onRouteUpdate = ({ location }) => {
     }, 1500)
 }
 
-export const replaceHydrateFunction = () => {
-    return (element, container) => {
-        const root = createRoot(container)
-        root.render(element)
-    }
-}
-
 export const wrapPageElement = WrapPagesWithLocaleContext

src/components/elements/stepper-view.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 import { useIsRtl } from 'components/hooks/use-isrtl'
 import CommonHeaderSection from 'components/elements/common-header-section'
-import { TString } from 'types/generics'
 import { useBrowserResize } from 'components/hooks/use-browser-resize'
+import { TString } from 'types/generics'
 
 const Checkmark = styled.span<{ is_rtl: boolean }>`
     display: inline-block;
@@ -79,11 +79,16 @@ type StepperViewTickProps = {
     color?: string
 }
 
+type StepperType = {
+    id: number
+    data: {
+        title: TString
+        subtitle: TString
+    }
+}
+
 type StepperViewProps = {
-    items: {
-        title?: TString
-        subtitle?: TString
-    }[]
+    items: StepperType[]
 } & Pick<StepperViewTickProps, 'pb' | 'pl'>
 
 const handleLastBorder = (index, items) => {
@@ -98,14 +103,14 @@ const StepperView = ({ pb, items }: StepperViewProps) => {
 
     return (
         <>
-            {items.map((item, index) => (
-                <div key={item.title}>
+            {items.map(({ data: { title, subtitle } }, index) => (
+                <div key={title}>
                     <FlexWrapper is_border={handleLastBorder(index, items)} pb={pb}>
                         <ContentWrapper>
                             <Oval></Oval>
                             <CommonHeaderSection
-                                title={item.title}
-                                subtitle={item.subtitle}
+                                title={title}
+                                subtitle={subtitle}
                                 title_font_size={is_mobile ? '18px ' : '24px'}
                                 margin_subtitle="1.3rem 0 0 0"
                                 subtitle_font_size="1.6rem"

src/components/hooks/use-dynamic-visible-content.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { ObjectPropType, TSmartContent } from 'types/generics'
 
 export interface IUseDynamicVisibleContent<T extends TSmartContent<unknown, object>> {
@@ -27,11 +27,16 @@ function useDynamicVisibleContent<T extends TSmartContent<unknown, object>>({
     config,
     content,
 }: IUseDynamicVisibleContent<T>): T[] {
+    const [items, setItems] = useState<T[]>([])
     const visible_items = useMemo(() => {
         return filterDynamicVisibleContent(content, config)
     }, [content, config])
 
-    return visible_items
+    useEffect(() => {
+        setItems(visible_items)
+    }, [visible_items.length])
+
+    return items
 }
 
 export default useDynamicVisibleContent

src/components/hooks/use-visible-content.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { TSmartContent } from 'types/generics'
 
 export interface IUseVisibleContent<T extends TSmartContent<unknown, object>> {
@@ -23,11 +23,16 @@ function useVisibleContent<T extends TSmartContent<unknown, object>>({
     config,
     content,
 }: IUseVisibleContent<T>): T[] {
+    const [items, setItems] = useState<T[]>([])
     const visible_items = useMemo(() => {
         return filterVisibleContent(content, config)
     }, [content, config])
 
-    return visible_items
+    useEffect(() => {
+        setItems(visible_items)
+    }, [visible_items.length])
+
+    return items
 }
 
 export default useVisibleContent

src/features/components/atoms/suspense-helper/index.tsx

@@ -0,0 +1,15 @@
+import React, { ReactNode, Suspense } from 'react'
+import { usePageLoaded } from 'components/hooks/use-page-loaded'
+
+type SuspenseHelperProps = {
+    fallback?: ReactNode
+    children: ReactNode
+}
+
+const SuspenseHelper = ({ fallback, children }: SuspenseHelperProps) => {
+    const [is_mounted] = usePageLoaded()
+
+    return <Suspense fallback={fallback}>{!is_mounted ? fallback : children}</Suspense>
+}
+
+export default SuspenseHelper

src/features/components/molecules/layout-overlay/index.tsx

@@ -1,17 +1,30 @@
-import React, { Suspense, lazy } from 'react'
+import React, { lazy, useEffect, useState } from 'react'
 import pMinDelay from 'p-min-delay'
 import loadable from '@loadable/component'
 import { overlay_container } from './layout-overlay.module.scss'
-import CfdWarningBanner from './cfd-warning-banner'
 import Flex from 'features/components/atoms/flex-box'
 import { useIsRtl } from 'components/hooks/use-isrtl'
+import { getLocationPathname, getLanguage } from 'common/utility'
+import SuspenseHelper from 'features/components/atoms/suspense-helper'
 
 const LiveChatButton = loadable(() => pMinDelay(import('./live-chat-button'), 5000))
 const WhatsappButton = loadable(() => pMinDelay(import('./whats-app-button'), 5000))
-const CookieBanner = lazy(() => pMinDelay(import('./cookie-banner'), 5000))
+const CookieBanner = lazy(() => import('./cookie-banner'))
+const CfdWarningBanner = lazy(() => import('./cfd-warning-banner'))
 
 const LayoutOverlay = () => {
     const is_rtl = useIsRtl()
+    const [is_home, setIsHome] = useState(false)
+
+    const isHomePage = () => {
+        const currentPath = getLocationPathname()
+        const language = getLanguage()
+
+        return currentPath === `/${language}/` || currentPath === '/'
+    }
+    useEffect(() => {
+        setIsHome(isHomePage())
+    }, [])
     return (
         <Flex.Box
             id="overlay-container"
@@ -29,16 +42,20 @@ const LayoutOverlay = () => {
                 align="end"
             >
                 <Flex.Box justify={is_rtl ? 'end' : 'start'} basis="6-12" grow={'1'}>
-                    <Suspense fallback={<></>}>
+                    <SuspenseHelper fallback={<></>}>
                         <CookieBanner />
-                    </Suspense>
+                    </SuspenseHelper>
                 </Flex.Box>
                 <Flex.Box direction="col">
                     <LiveChatButton />
                     <WhatsappButton />
                 </Flex.Box>
             </Flex.Box>
-            <CfdWarningBanner />
+            {is_home && (
+                <SuspenseHelper fallback={<></>}>
+                    <CfdWarningBanner />
+                </SuspenseHelper>
+            )}
         </Flex.Box>
     )
 }

src/features/components/organisms/what-are-digital-options/index.tsx

@@ -27,7 +27,9 @@ const WhatAreDigitalOptions = ({
             gap={'8x'}
             className={options_heading_section}
         >
-            {is_coming_soon && <Label text="_t_Coming soon_t_" bgcolor="blue" />}
+            {is_coming_soon && (
+                <Label text="_t_Available on Demo accounts only_t_" bgcolor="blue" />
+            )}
             <Typography.Heading align="center" as="h1">
                 <Localize translate_text={heading} />
             </Typography.Heading>

src/features/components/templates/footer/social-icons/data.ts

@@ -1,4 +1,5 @@
 import Telegram from 'images/svg/footer/telegram_icon.svg'
+import Tiktok from 'images/svg/footer/tiktok_icon.svg'
 import Twitter from 'images/svg/footer/twitter_icon.svg'
 import Youtube from 'images/svg/footer/youtube_icon.svg'
 import Instagram from 'images/svg/footer/instagram_icon.svg'
@@ -318,6 +319,22 @@ export const socialMediaAccounts: SmartSocialAccount[] = [
     },
     {
         id: 12,
+        data: {
+            url: {
+                type: 'non-company',
+                target: '_blank',
+                href: 'https://twitter.com/deriv_careers',
+                show_eu_modal: true,
+            },
+            icon: Twitter,
+            image_alt: '_t_Twitter_t_',
+        },
+        visibility: {
+            is_career_page: true,
+        },
+    },
+    {
+        id: 13,
         data: {
             url: {
                 type: 'non-company',
@@ -334,7 +351,7 @@ export const socialMediaAccounts: SmartSocialAccount[] = [
     },
     //temp removal of telegram : Start
     // {
-    //     id: 13,
+    //     id: 14,
     //     data: {
     //         url: {
     //             type: 'non-company',
@@ -350,4 +367,20 @@ export const socialMediaAccounts: SmartSocialAccount[] = [
     //     },
     // },
     //temp removal of telegram : End
+    {
+        id: 15,
+        data: {
+            url: {
+                type: 'non-company',
+                target: '_blank',
+                href: 'https://tiktok.com/@derivcareers',
+                show_eu_modal: true,
+            },
+            icon: Tiktok,
+            image_alt: '_t_Tiktok_t_',
+        },
+        visibility: {
+            is_career_page: true,
+        },
+    },
 ]