binary-com · Jan 25, 2022 · Jan 3, 2022 · Jan 4, 2022 · Jan 4, 2022 · Jan 10, 2022
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import Cookies from 'js-cookie'
 import Login from 'common/login'
@@ -17,6 +16,12 @@ import Facebook from 'images/svg/custom/facebook-blue.svg'
 import Google from 'images/svg/custom/google.svg'
 import ViewEmailImage from 'images/common/sign-up/view-email.png'
 
+type GetEbookProps = {
+    color?: string
+    ebook_utm_code: string
+    onSubmit?: (submit_status: string, email: string) => void
+}
+
 const SignupFormWrapper = styled(Flex)`
     width: 50%;
     align-items: center;
@@ -175,7 +180,7 @@ const EmailImage = styled.img`
     width: 20rem;
 `
 
-const GetEbook = ({ color = 'var(--color-white)', ebook_utm_code, onSubmit }) => {
+const GetEbook = ({ color = 'var(--color-white)', ebook_utm_code, onSubmit }: GetEbookProps) => {
     const [is_checked, setChecked] = React.useState(false)
     const [email, setEmail] = React.useState('')
     const [is_submitting, setIsSubmitting] = React.useState(false)
@@ -200,8 +205,8 @@ const GetEbook = ({ color = 'var(--color-white)', ebook_utm_code, onSubmit }) =>
         setEmailErrorMsg(validateEmail(message.replace(/\s/g, '')))
     }
 
-    const validateEmail = (email) => {
-        const error_message = validation.email(email) || submit_error_msg
+    const validateEmail = (enteredEmail) => {
+        const error_message = validation.email(enteredEmail) || submit_error_msg
 
         if (submit_error_msg) {
             setSubmitErrorMsg('')
@@ -216,15 +221,15 @@ const GetEbook = ({ color = 'var(--color-white)', ebook_utm_code, onSubmit }) =>
         setEmailErrorMsg('')
     }
 
-    const getVerifyEmailRequest = (email) => {
+    const getVerifyEmailRequest = (enteredEmail) => {
         const affiliate_token = Cookies.getJSON('affiliate_tracking')
 
         const cookies = getCookiesFields()
         const cookies_objects = getCookiesObject(cookies)
         const cookies_value = getDataObjFromCookies(cookies_objects, cookies)
 
         return {
-            verify_email: email,
+            verify_email: enteredEmail,
             type: 'account_opening',
             url_parameters: {
                 ...(affiliate_token && { affiliate_token: affiliate_token }),
@@ -394,10 +399,4 @@ const GetEbook = ({ color = 'var(--color-white)', ebook_utm_code, onSubmit }) =>
     )
 }
 
-GetEbook.propTypes = {
-    color: PropTypes.string,
-    ebook_utm_code: PropTypes.string,
-    onSubmit: PropTypes.func,
-}
-
 export default GetEbook
@@ -1,12 +1,22 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import GetEbook from './_get-ebook'
+import { HeaderAndHeroProps } from './_types'
 import { Flex } from 'components/containers'
 import { Header, QueryImage, Text } from 'components/elements'
 import { localize } from 'components/localization'
 import device from 'themes/device.js'
 
+type HeaderImageProps = {
+    imgWidth: number
+    imgHeight: number
+}
+
+type HeaderSectionProps = HeaderAndHeroProps & {
+    imgHeight: number
+    imgWidth: number
+}
+
 const MainWrapper = styled(Flex)`
     width: 100%;
     background-image: ${(props) =>
@@ -48,9 +58,13 @@ const TopHeaderImgWrapper = styled(Flex)`
         margin-top: -70px;
     }
 `
-const HeaderImage = styled(QueryImage)`
-    width: ${(props) => (props.imgWidth ? `${props.imgWidth}px` : '557px')};
-    height: ${(props) => (props.imgHeight ? `${props.imgHeight}px` : '703px')};
+
+const widthProps = (props) => (props.imgWidth ? `${props.imgWidth}px` : '557px')
+const heightProps = (props) => (props.imgHeight ? `${props.imgHeight}px` : '703px')
+
+const HeaderImage = styled(QueryImage)<HeaderImageProps>`
+    width: ${widthProps};
+    height: ${heightProps};
     position: relative;
     top: 75px;
     margin: 0;
@@ -71,7 +85,7 @@ const HeaderImage = styled(QueryImage)`
 
     @media ${device.tabletS} {
         width: ${(props) => (props.imgWidth < 600 ? '115%' : '105%')};
-        height: ${(props) => (props.imgWidth < 600 ? '105%' : '105%')};
+        height: ${(props) => props.imgWidth < 600 && '105%'};
         margin-left: ${(props) => (props.imgWidth < 600 ? '-110px' : '-50px')};
     }
     @media ${device.mobileS} {
@@ -149,7 +163,7 @@ const HeaderSection = ({
     bg,
     bgMobile,
     ebook_utm_code,
-}) => {
+}: HeaderSectionProps) => {
     return (
         <MainWrapper bg={bg} bgMobile={bgMobile}>
             <HeaderBody>
@@ -228,17 +242,4 @@ const HeaderSection = ({
     )
 }
 
-HeaderSection.propTypes = {
-    authorDesc: PropTypes.string,
-    authorName: PropTypes.string,
-    bg: PropTypes.any,
-    bgMobile: PropTypes.any,
-    ebook_utm_code: PropTypes.string,
-    imgHeight: PropTypes.number,
-    imgWidth: PropTypes.number,
-    introMain: PropTypes.any,
-    introSub: PropTypes.any,
-    mainHeaderImage: PropTypes.any,
-}
-
 export default HeaderSection
@@ -1,13 +1,17 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import GetEbook from './_get-ebook'
+import { HeaderAndHeroProps } from './_types'
 import { Flex, Box } from 'components/containers'
 import { Header, QueryImage, Text } from 'components/elements'
 import { localize } from 'components/localization'
 import device from 'themes/device.js'
 import { useBrowserResize } from 'components/hooks/use-browser-resize'
 
+type HeroProps = HeaderAndHeroProps & {
+    color: string
+}
+
 const MainWrapper = styled(Box)`
     background-image: ${(props) => props.bg};
 
@@ -49,7 +53,7 @@ const Hero = ({
     introMain,
     introSub,
     mainHeaderImage,
-}) => {
+}: HeroProps) => {
     const [is_mobile] = useBrowserResize()
     return (
         <MainWrapper width="100%" p="4%" bg={bg} tablet={{ bg: { bgMobile } }}>
@@ -136,16 +140,4 @@ const Hero = ({
     )
 }
 
-Hero.propTypes = {
-    authorDesc: PropTypes.string,
-    authorName: PropTypes.string,
-    bg: PropTypes.any,
-    bgMobile: PropTypes.any,
-    color: PropTypes.string,
-    ebook_utm_code: PropTypes.string,
-    introMain: PropTypes.string,
-    introSub: PropTypes.string,
-    mainHeaderImage: PropTypes.any,
-}
-
 export default Hero
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
+import { ImageTextAndIntroductionProps } from './_types'
 import { Header, Text, Li } from 'components/elements'
 import checkIcon from 'images/common/ebooks/check-icon.png'
 import BackgroundPattern from 'images/svg/landing/ebook-intro-bg.svg'
@@ -91,7 +91,13 @@ const MediaItemList = styled.ul`
     font-size: 20px;
 `
 
-const ImageText = ({ introImage, imageWidth, introPara, subPara, introList }) => {
+const ImageText = ({
+    introImage,
+    imageWidth,
+    introPara,
+    subPara,
+    introList,
+}: ImageTextAndIntroductionProps) => {
     return (
         <BackgroundWrapper>
             <MediaWrapper>
@@ -140,12 +146,4 @@ const ImageText = ({ introImage, imageWidth, introPara, subPara, introList }) =>
     )
 }
 
-ImageText.propTypes = {
-    imageWidth: PropTypes.number,
-    introImage: PropTypes.any,
-    introList: PropTypes.array,
-    introPara: PropTypes.string,
-    subPara: PropTypes.string,
-}
-
 export default ImageText
@@ -1,12 +1,19 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
 import { Header, Text, Li } from 'components/elements'
 import checkIcon from 'images/common/ebooks/check-icon.png'
 import BackgroundPattern from 'images/svg/landing/ebook-intro-bg.svg'
 import device from 'themes/device'
 import { localize, Localize } from 'components/localization'
 
+type IntroductionProps = {
+    imageWidth: number
+    introImage: string
+    introList?: string[]
+    introPara: string
+    subPara?: string
+}
+
 const BacgroundWrapper = styled.div`
     width: 100%;
     height: 100%;
@@ -85,7 +92,13 @@ const MediaItemList = styled.ul`
     font-size: 20px;
 `
 
-const Introduction = ({ introImage, imageWidth, introPara, subPara, introList }) => {
+const Introduction = ({
+    introImage,
+    imageWidth,
+    introPara,
+    subPara,
+    introList,
+}: IntroductionProps) => {
     return (
         <BacgroundWrapper>
             <MediaWapper>
@@ -135,12 +148,4 @@ const Introduction = ({ introImage, imageWidth, introPara, subPara, introList })
     )
 }
 
-Introduction.propTypes = {
-    imageWidth: PropTypes.number,
-    introImage: PropTypes.any,
-    introList: PropTypes.array,
-    introPara: PropTypes.string,
-    subPara: PropTypes.string,
-}
-
 export default Introduction
@@ -1,11 +1,17 @@
 import React from 'react'
 import styled from 'styled-components'
-import PropTypes from 'prop-types'
+import type { ImageDataLike } from 'gatsby-plugin-image'
 import { Header, Li, QueryImage } from 'components/elements'
 import checkIcon from 'images/common/ebooks/check-icon.png'
 import device from 'themes/device'
 import { localize, Localize } from 'components/localization'
 
+type TopicsProps = {
+    title?: string
+    topicsImage: ImageDataLike
+    topicsList: string[]
+}
+
 const FullWidth = styled.div`
     background-image: linear-gradient(to bottom, #eaf4f5 1%, rgba(242, 245, 248, 0) 99%);
 
@@ -79,7 +85,7 @@ const TopicImgWrapper = styled.div`
     }
 `
 
-const Topics = ({ title, topicsImage, topicsList }) => {
+const Topics = ({ title, topicsImage, topicsList }: TopicsProps) => {
     return (
         <FullWidth>
             <Wrapper>
@@ -113,10 +119,4 @@ const Topics = ({ title, topicsImage, topicsList }) => {
     )
 }
 
-Topics.propTypes = {
-    title: PropTypes.string,
-    topicsImage: PropTypes.any,
-    topicsList: PropTypes.array,
-}
-
 export default Topics
@@ -0,0 +1,20 @@
+import type { ImageDataLike } from 'gatsby-plugin-image'
+
+export type HeaderAndHeroProps = {
+    authorDesc: string
+    authorName: string
+    bg?: string
+    bgMobile?: string
+    ebook_utm_code: string
+    introMain: string
+    introSub: string
+    mainHeaderImage: ImageDataLike
+}
+
+export type ImageTextAndIntroductionProps = {
+    imageWidth: number
+    introImage: string
+    introList?: string[]
+    introPara: string
+    subPara?: string
+}
@@ -1,14 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { graphql, useStaticQuery } from 'gatsby'
 import Introduction from './components/_introduction'
-import HeaderSection from './components/_header'
+import HeaderSection from './components/_header-section'
 import Topics from './components/_topics'
 import Layout from 'components/layout/layout'
 import { SEO } from 'components/containers'
 import { localize, WithIntl } from 'components/localization'
 import introForexEbook from 'images/common/ebooks/introduction-forex-ebook.png'
 
+type ForexEbookProps = {
+    language: string
+}
+
 const introPoints = [
     localize('The basics of forex trading'),
     localize('How to manage risk when trading forex'),
@@ -46,7 +49,7 @@ const query = graphql`
     }
 `
 
-const ForexEbook = (props) => {
+const ForexEbook = (props: ForexEbookProps) => {
     const { language } = props
     let lng = language
     if (lng != 'es') {
@@ -89,8 +92,4 @@ const ForexEbook = (props) => {
     )
 }
 
-ForexEbook.propTypes = {
-    language: PropTypes.string,
-}
-
 export default WithIntl()(ForexEbook)
@@ -1,6 +1,6 @@
 import React from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
-import HeaderSection from './components/_header'
+import HeaderSection from './components/_header-section'
 import Introduction from './components/_introduction'
 import Topics from './components/_topics'
 import Layout from 'components/layout/layout'