From 1e46b7c4142bd90e16f2d5fcbc62bd2d700c2323 Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Mon, 17 Jan 2022 15:26:17 +0330
Subject: [PATCH 1/2] convert stockes to ts

---
 .../stocks/{_dtrading.js => _dtrading.tsx}    | 61 ++++++++++++-------
 .../{_footerBanner.js => _footerBanner.tsx}   | 48 ++++++++-------
 .../{_headerSection.js => _headerSection.tsx} | 21 ++++++-
 .../stocks/{_lazy-load.js => _lazy-load.ts}   | 10 +--
 .../{_parallelogram.js => _parallelogram.tsx} | 54 +++++++++-------
 ..._whyTradeWIthUs.js => _whyTradeWIthUs.tsx} | 28 +++++----
 .../landing/stocks/{index.js => index.tsx}    | 10 +--
 7 files changed, 141 insertions(+), 91 deletions(-)
 rename src/pages/landing/stocks/{_dtrading.js => _dtrading.tsx} (87%)
 rename src/pages/landing/stocks/{_footerBanner.js => _footerBanner.tsx} (86%)
 rename src/pages/landing/stocks/{_headerSection.js => _headerSection.tsx} (99%)
 rename src/pages/landing/stocks/{_lazy-load.js => _lazy-load.ts} (73%)
 rename src/pages/landing/stocks/{_parallelogram.js => _parallelogram.tsx} (84%)
 rename src/pages/landing/stocks/{_whyTradeWIthUs.js => _whyTradeWIthUs.tsx} (87%)
 rename src/pages/landing/stocks/{index.js => index.tsx} (97%)

diff --git a/src/pages/landing/stocks/_dtrading.js b/src/pages/landing/stocks/_dtrading.tsx
similarity index 87%
rename from src/pages/landing/stocks/_dtrading.js
rename to src/pages/landing/stocks/_dtrading.tsx
index c50f1aa6f19..8b6413df020 100644
--- a/src/pages/landing/stocks/_dtrading.js
+++ b/src/pages/landing/stocks/_dtrading.tsx
@@ -1,11 +1,25 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import device from 'themes/device'
 import { Container, Flex, SectionContainer } from 'components/containers'
 import { Header, Text, QueryImage } from 'components/elements'
 
+type ContentProps = {
+    margin_right: string
+    margin_left: string
+}
+
+type ImageWrapperProps = {
+    width: string
+    margin_right?: string
+}
+
+type RowProps = {
+    flex_direction: string
+    flex_direction_mobile: string
+}
+
 const StyledSection = styled(SectionContainer)`
     background-color: var(--color-white);
     padding: 40px 120px;
@@ -16,7 +30,7 @@ const StyledSection = styled(SectionContainer)`
 const Wrapper = styled(Container)`
     width: 100%;
 `
-const Content = styled.div`
+const Content = styled.div<ContentProps>`
     width: 689px;
     display: flex;
     flex-direction: column;
@@ -54,7 +68,7 @@ const MobileImageWrapper = styled(Container)`
     }
 `
 
-const ImageWrapper = styled(Flex)`
+const ImageWrapper = styled(Flex)<ImageWrapperProps>`
     width: ${(props) => props.width};
     margin-right: ${(props) => props.margin_right};
 
@@ -77,7 +91,8 @@ const StyledHeader = styled(Header)`
         text-align: center;
     }
 `
-const Row = styled.div`
+
+const Row = styled.div<RowProps>`
     flex-direction: ${(props) => props.flex_direction};
     width: 100%;
     display: flex;
@@ -145,14 +160,30 @@ const query = graphql`
         }
     }
 `
-const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
+
+type DTradingProps = {
+    contentMargin: string
+    reverse: boolean
+    setWidth: string
+    trading: TradingType[]
+}
+
+type TradingType = {
+    title: ReactElement
+    subtitle: ReactElement
+    image_name: string
+    image_alt: string
+    image_name_mobile?: string
+}
+
+const DTrading = ({ contentMargin, trading, reverse, setWidth }: DTradingProps) => {
     const data = useStaticQuery(query)
 
     return (
         <StyledSection>
             <Wrapper fd="column" ai="center">
                 {trading.map((item, index) => {
-                    let is_even = reverse ? (index + 1) % 2 : index % 2
+                    const is_even = reverse ? (index + 1) % 2 : index % 2
                     return (
                         <Row
                             flex_direction={!is_even ? 'row' : 'row-reverse'}
@@ -165,14 +196,6 @@ const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
                             >
                                 <StyledHeader type="display-title">{item.title}</StyledHeader>
                                 <Text>{item.subtitle}</Text>
-                                {two_title && (
-                                    <>
-                                        <StyledHeader type="page-title" mt="2.4rem">
-                                            {item.second_title}
-                                        </StyledHeader>
-                                        <Text>{item.second_subtitle}</Text>
-                                    </>
-                                )}
                             </Content>
                             {item.image_name_mobile && (
                                 <ImageWrapper width={setWidth ? setWidth : '448px;'} ai="center">
@@ -209,12 +232,4 @@ const DTrading = ({ contentMargin, trading, reverse, setWidth, two_title }) => {
     )
 }
 
-DTrading.propTypes = {
-    contentMargin: PropTypes.string,
-    reverse: PropTypes.bool,
-    setWidth: PropTypes.string,
-    trading: PropTypes.array,
-    two_title: PropTypes.bool,
-}
-
 export default DTrading
diff --git a/src/pages/landing/stocks/_footerBanner.js b/src/pages/landing/stocks/_footerBanner.tsx
similarity index 86%
rename from src/pages/landing/stocks/_footerBanner.js
rename to src/pages/landing/stocks/_footerBanner.tsx
index 5e3e2bd9650..fc40ea71ea0 100644
--- a/src/pages/landing/stocks/_footerBanner.js
+++ b/src/pages/landing/stocks/_footerBanner.tsx
@@ -1,11 +1,9 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { Container, Flex } from 'components/containers'
 import { Header, QueryImage } from 'components/elements'
 import { LinkButton } from 'components/form'
 import { localize } from 'components/localization'
-// import Show from 'components/containers/show'
 import device from 'themes/device.js'
 
 const BannerWrapper = styled(Flex)`
@@ -128,19 +126,33 @@ const StyledHeaderSmall = styled(Header)`
     }
 `
 
-const FooterBanner = ({ background_pattern, data, is_ppc, small_title, title }) => {
-    const BackgroundPattern = styled.img`
-        position: absolute;
-        top: -298px;
-        left: -8%;
-        z-index: 1;
-        width: 558px;
+const BackgroundPattern = styled.img`
+    position: absolute;
+    top: -298px;
+    left: -8%;
+    z-index: 1;
+    width: 558px;
 
-        @media ${device.tabletL} {
-            display: none;
-        }
-    `
+    @media ${device.tabletL} {
+        display: none;
+    }
+`
 
+type FooterBannerProps = {
+    background_pattern: string
+    is_ppc: boolean
+    title: ReactElement
+    small_title: ReactElement
+    data: { stocks_banner: any }
+}
+
+const FooterBanner = ({
+    background_pattern,
+    data,
+    is_ppc,
+    small_title,
+    title,
+}: FooterBannerProps) => {
     return (
         <BannerWrapper>
             <MainWrapper>
@@ -194,12 +206,4 @@ const FooterBanner = ({ background_pattern, data, is_ppc, small_title, title })
     )
 }
 
-FooterBanner.propTypes = {
-    background_pattern: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    data: PropTypes.object.isRequired,
-    is_ppc: PropTypes.bool,
-    small_title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-}
-
 export default FooterBanner
diff --git a/src/pages/landing/stocks/_headerSection.js b/src/pages/landing/stocks/_headerSection.tsx
similarity index 99%
rename from src/pages/landing/stocks/_headerSection.js
rename to src/pages/landing/stocks/_headerSection.tsx
index eecd3d88e58..9344bad15ce 100644
--- a/src/pages/landing/stocks/_headerSection.js
+++ b/src/pages/landing/stocks/_headerSection.tsx
@@ -31,6 +31,7 @@ const MainWrapper = styled(Flex)`
     flex-direction: column;
     overflow: hidden;
 `
+
 const HeaderWrapper = styled(Flex)`
     position: relative;
     overflow: hidden;
@@ -53,6 +54,7 @@ const TopHeaderWrapper = styled(Container)`
         margin-top: 41px;
     }
 `
+
 const BackgroundPattern = styled.img`
     position: absolute;
     top: 30%;
@@ -70,6 +72,7 @@ const BackgroundPattern = styled.img`
         height: 224px;
     }
 `
+
 const BackgroundPatternSection = styled.img`
     width: 679px;
     position: absolute;
@@ -80,6 +83,7 @@ const BackgroundPatternSection = styled.img`
         display: none;
     }
 `
+
 const TopHeaderTextDiv = styled(Flex)`
     width: 690px;
     margin-right: 24px;
@@ -91,6 +95,7 @@ const TopHeaderTextDiv = styled(Flex)`
         margin-right: 0;
     }
 `
+
 const TopTextWrapper = styled(Flex)`
     flex-direction: column;
     margin-bottom: 26%;
@@ -99,10 +104,12 @@ const TopTextWrapper = styled(Flex)`
         margin-bottom: 0;
     }
 `
+
 const StyledLinkButton = styled(LinkButton)`
     border: unset;
     line-height: 20px;
 `
+
 const StyledHeader = styled(Header)`
     margin-bottom: 16px;
     @media ${device.tabletL} {
@@ -110,6 +117,7 @@ const StyledHeader = styled(Header)`
         margin-bottom: 8px;
     }
 `
+
 const StyledHeaderSmall = styled(Header)`
     font-size: 24px;
     max-width: 58rem;
@@ -120,10 +128,12 @@ const StyledHeaderSmall = styled(Header)`
         max-width: 100%;
     }
 `
+
 const BtnDiv = styled(Flex)`
     height: unset;
     justify-content: start;
 `
+
 const TopHeaderBgDiv = styled(Flex)`
     width: 486px;
     @media ${device.tabletL} {
@@ -133,15 +143,18 @@ const TopHeaderBgDiv = styled(Flex)`
         position: relative;
     }
 `
+
 const TopHeaderImgWrapper = styled(Flex)`
     align-items: flex-end;
 `
+
 const DesktopImageWrapper = styled(Container)`
     width: 100%;
     @media ${device.tabletL} {
         display: none;
     }
 `
+
 const MobileImageWrapper = styled(Container)`
     display: none;
     @media ${device.tabletL} {
@@ -149,6 +162,7 @@ const MobileImageWrapper = styled(Container)`
         width: 100%;
     }
 `
+
 const SectionWrapper = styled(Container)`
     height: 704px;
     flex-direction: row;
@@ -163,6 +177,7 @@ const SectionWrapper = styled(Container)`
         flex-direction: column-reverse;
     }
 `
+
 const SectionImgWrapper = styled(Flex)`
     width: 487px;
     @media ${device.laptopM} {
@@ -173,6 +188,7 @@ const SectionImgWrapper = styled(Flex)`
         justify-content: center;
     }
 `
+
 const SectionImgDiv = styled.div`
     width: 100%;
     position: relative;
@@ -181,6 +197,7 @@ const SectionImgDiv = styled.div`
         max-width: 58.8rem;
     }
 `
+
 const SectionBannerImg = styled.img`
     width: 100%;
     position: absolute;
@@ -193,6 +210,7 @@ const SectionBannerImg = styled.img`
         margin: 0 auto;
     }
 `
+
 const SectionTextWrapper = styled(Flex)`
     width: 588px;
     align-items: center;
@@ -210,6 +228,7 @@ const SectionTextWrapper = styled(Flex)`
         margin: 0 auto;
     }
 `
+
 const SectionStyledHeader = styled(Header)`
     font-size: 64px;
     text-align: left;
@@ -221,6 +240,7 @@ const SectionStyledHeader = styled(Header)`
         margin-bottom: 8px;
     }
 `
+
 const SectionStyledHeaderSmall = styled(Header)`
     font-size: 24px;
     max-width: 100%;
@@ -232,7 +252,6 @@ const SectionStyledHeaderSmall = styled(Header)`
         text-align: center;
     }
 `
-// const is_ppc = true
 
 const HeaderSection = () => {
     const data = useStaticQuery(query)
diff --git a/src/pages/landing/stocks/_lazy-load.js b/src/pages/landing/stocks/_lazy-load.ts
similarity index 73%
rename from src/pages/landing/stocks/_lazy-load.js
rename to src/pages/landing/stocks/_lazy-load.ts
index d6622da0b88..9e74da0ee0f 100644
--- a/src/pages/landing/stocks/_lazy-load.js
+++ b/src/pages/landing/stocks/_lazy-load.ts
@@ -1,7 +1,7 @@
 import Loadable from '@loadable/component'
 
-export const HeaderSection = Loadable(() => import('./_headerSection.js'))
-export const DTrading = Loadable(() => import('./_dtrading.js'))
-export const Parallelogram = Loadable(() => import('./_parallelogram.js'))
-export const WhyTradeWithUs = Loadable(() => import('./_whyTradeWIthUs.js'))
-export const FooterBanner = Loadable(() => import('./_footerBanner.js'))
+export const HeaderSection = Loadable(() => import('./_headerSection'))
+export const DTrading = Loadable(() => import('./_dtrading'))
+export const Parallelogram = Loadable(() => import('./_parallelogram'))
+export const WhyTradeWithUs = Loadable(() => import('./_whyTradeWIthUs'))
+export const FooterBanner = Loadable(() => import('./_footerBanner'))
diff --git a/src/pages/landing/stocks/_parallelogram.js b/src/pages/landing/stocks/_parallelogram.tsx
similarity index 84%
rename from src/pages/landing/stocks/_parallelogram.js
rename to src/pages/landing/stocks/_parallelogram.tsx
index 3ec24651253..d69b1f1c9c1 100644
--- a/src/pages/landing/stocks/_parallelogram.js
+++ b/src/pages/landing/stocks/_parallelogram.tsx
@@ -1,11 +1,23 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import device from 'themes/device'
 import { Container, SectionContainer, Flex } from 'components/containers'
 import { Header, Text, QueryImage } from 'components/elements'
 
+type ContentProps = {
+    margin_right: string
+    margin_left: string
+}
+
+type ImageWrapperProps = {
+    margin_right?: string
+}
+
+type RowProps = {
+    flex_direction: string
+}
+
 const StyledSection = styled(SectionContainer)`
     background-color: var(--color-grey-30);
     clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
@@ -17,7 +29,7 @@ const MainWrapper = styled(Container)`
     }
 `
 
-const Content = styled(Flex)`
+const Content = styled(Flex)<ContentProps>`
     width: 60%;
     flex-direction: column;
     margin-right: ${(props) => props.margin_right};
@@ -40,7 +52,7 @@ const Content = styled(Flex)`
     }
 `
 
-const ImageWrapper = styled.div`
+const ImageWrapper = styled.div<ImageWrapperProps>`
     display: flex;
     width: 40%;
     margin-right: ${(props) => props.margin_right};
@@ -60,7 +72,7 @@ const StyledHeader = styled(Header)`
         text-align: center;
     }
 `
-const Row = styled.div`
+const Row = styled.div<RowProps>`
     flex-direction: ${(props) => props.flex_direction};
     width: 100%;
     display: flex;
@@ -74,6 +86,7 @@ const Row = styled.div`
         flex-direction: column;
     }
 `
+
 const query = graphql`
     query {
         dbot_strategy: file(relativePath: { eq: "dbot/dbot-strategy.png" }) {
@@ -121,26 +134,31 @@ const query = graphql`
         }
     }
 `
-const Parallelogram = ({ trading, reverse, two_title }) => {
+
+type ParallelogramProps = {
+    reverse: boolean
+    trading: TradingType[]
+}
+
+type TradingType = {
+    title: ReactElement
+    subtitle: ReactElement
+    image_name: string
+    image_alt: string
+}
+
+const Parallelogram = ({ trading, reverse }: ParallelogramProps) => {
     const data = useStaticQuery(query)
     return (
         <StyledSection>
             <MainWrapper fd="column">
                 {trading.map((item, index) => {
-                    let is_even = reverse ? (index + 1) % 2 : index % 2
+                    const is_even = reverse ? (index + 1) % 2 : index % 2
                     return (
                         <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={index}>
                             <Content>
                                 <StyledHeader type="display-title">{item.title}</StyledHeader>
                                 <Text>{item.subtitle}</Text>
-                                {two_title && (
-                                    <>
-                                        <StyledHeader type="page-title" mt="2.4rem">
-                                            {item.second_title}
-                                        </StyledHeader>
-                                        <Text>{item.second_subtitle}</Text>
-                                    </>
-                                )}
                             </Content>
                             {item.image_name && (
                                 <ImageWrapper margin_right={!is_even ? '0' : '2.4rem'}>
@@ -159,10 +177,4 @@ const Parallelogram = ({ trading, reverse, two_title }) => {
     )
 }
 
-Parallelogram.propTypes = {
-    reverse: PropTypes.bool,
-    trading: PropTypes.array,
-    two_title: PropTypes.bool,
-}
-
 export default Parallelogram
diff --git a/src/pages/landing/stocks/_whyTradeWIthUs.js b/src/pages/landing/stocks/_whyTradeWIthUs.tsx
similarity index 87%
rename from src/pages/landing/stocks/_whyTradeWIthUs.js
rename to src/pages/landing/stocks/_whyTradeWIthUs.tsx
index 950d09dd8b0..c4bef07d93a 100644
--- a/src/pages/landing/stocks/_whyTradeWIthUs.js
+++ b/src/pages/landing/stocks/_whyTradeWIthUs.tsx
@@ -1,8 +1,7 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { Container, Flex, SectionContainer } from 'components/containers'
-import { Header, Text } from 'components/elements'
+import { Header } from 'components/elements'
 import device from 'themes/device.js'
 
 const SectionWrapper = styled(SectionContainer)`
@@ -36,14 +35,26 @@ const StyledImage = styled.img`
     width: 80px;
     height: 80px;
 `
+
 const StyledIconTitle = styled(Header)`
     @media ${device.tabletL} {
         font-size: 20px;
     }
 `
 
-const WhyTradeWithUs = ({ itemsArr, mainTitle, columnPerRow }) => {
-    let CardWidth = 100 / columnPerRow + '%'
+type WhyTradeWithUsProps = {
+    mainTitle: ReactElement
+    columnPerRow: number
+    itemsArr: ItemsArrType[]
+}
+
+type ItemsArrType = {
+    title: ReactElement
+    icon: string
+}
+
+const WhyTradeWithUs = ({ itemsArr, mainTitle, columnPerRow }: WhyTradeWithUsProps) => {
+    const CardWidth = 100 / columnPerRow + '%'
     const Card = styled(Flex)`
         max-width: 38.4rem;
         justify-content: flex-start;
@@ -101,7 +112,6 @@ const WhyTradeWithUs = ({ itemsArr, mainTitle, columnPerRow }) => {
                                 >
                                     {item.title}
                                 </StyledIconTitle>
-                                {item.desc && <Text align="center">{item.desc}</Text>}
                             </Card>
                         )
                     })}
@@ -111,10 +121,4 @@ const WhyTradeWithUs = ({ itemsArr, mainTitle, columnPerRow }) => {
     )
 }
 
-WhyTradeWithUs.propTypes = {
-    columnPerRow: PropTypes.number,
-    itemsArr: PropTypes.array,
-    mainTitle: PropTypes.object,
-}
-
 export default WhyTradeWithUs
diff --git a/src/pages/landing/stocks/index.js b/src/pages/landing/stocks/index.tsx
similarity index 97%
rename from src/pages/landing/stocks/index.js
rename to src/pages/landing/stocks/index.tsx
index 2dd90deccf1..c943d7a66b8 100644
--- a/src/pages/landing/stocks/index.js
+++ b/src/pages/landing/stocks/index.tsx
@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-import {
-    FooterBanner,
-    HeaderSection,
-    DTrading,
-    Parallelogram,
-    WhyTradeWithUs,
-} from './_lazy-load.js'
+import { FooterBanner, HeaderSection, DTrading, Parallelogram, WhyTradeWithUs } from './_lazy-load'
 import BackgroundFooterStocksPattern from 'images/svg/stock-indices/stocks-footer-banner-overlay-shape.svg'
 import Layout from 'components/layout/layout'
 import { Show, SEO } from 'components/containers'
@@ -104,7 +98,9 @@ const Stocks = () => {
         setMobile(isBrowser() ? window.screen.width <= size.mobileL : false)
         window.addEventListener('resize', handleResizeWindow)
     })
+
     const data = useStaticQuery(query)
+
     return (
         <Layout is_ppc_redirect={true}>
             <SEO

From 23190c641805b56a7347c789dce45351ba56431d Mon Sep 17 00:00:00 2001
From: niloo-fs <niloofar.sadeghi@firstsource.tech>
Date: Tue, 25 Jan 2022 10:08:36 +0330
Subject: [PATCH 2/2] fix stocks_banner type

---
 src/pages/landing/stocks/_footerBanner.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/landing/stocks/_footerBanner.tsx b/src/pages/landing/stocks/_footerBanner.tsx
index fc40ea71ea0..7ad054dfc9b 100644
--- a/src/pages/landing/stocks/_footerBanner.tsx
+++ b/src/pages/landing/stocks/_footerBanner.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
+import type { ImageDataLike } from 'gatsby-plugin-image'
 import { Container, Flex } from 'components/containers'
 import { Header, QueryImage } from 'components/elements'
 import { LinkButton } from 'components/form'
@@ -143,7 +144,7 @@ type FooterBannerProps = {
     is_ppc: boolean
     title: ReactElement
     small_title: ReactElement
-    data: { stocks_banner: any }
+    data: { stocks_banner: ImageDataLike }
 }
 
 const FooterBanner = ({