diff --git a/src/components/form/button.js b/src/components/form/button.js index 1dae9325065..f2c7dcc10d7 100644 --- a/src/components/form/button.js +++ b/src/components/form/button.js @@ -4,7 +4,7 @@ import { Paddings, Margins } from 'themes/function' import device from 'themes/device.js' export const SharedButtonStyle = css` - border-radius: 6px; + border-radius: 4px; padding: 10px 16px; font-size: 14px; transition: all 0.25s; diff --git a/src/components/hooks/use-debounced-effect.tsx b/src/components/hooks/use-debounced-effect.tsx index f6064da5dd5..11d4caaae49 100644 --- a/src/components/hooks/use-debounced-effect.tsx +++ b/src/components/hooks/use-debounced-effect.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react' -export const useDebouncedEffect = (effect: () => void, deps: any[], delay: number): void => { +export const useDebouncedEffect = (effect: () => void, deps: unknown[], delay: number): void => { useEffect(() => { const handler = setTimeout(() => effect(), delay) diff --git a/src/components/localization/config.js b/src/components/localization/config.js index 64e365da71a..ce89b66a4f6 100644 --- a/src/components/localization/config.js +++ b/src/components/localization/config.js @@ -1,9 +1,9 @@ -import i18n from 'i18next' +import i18n, { use, t } from 'i18next' import { initReactI18next } from 'react-i18next' import { str as crc32 } from 'crc-32' import language_config from '../../../i18n-config' -i18n.use(initReactI18next).init({ +use(initReactI18next).init({ ns: ['translations'], defaultNS: 'translations', @@ -25,7 +25,6 @@ i18n.use(initReactI18next).init({ i18n.languages = Object.keys(language_config) -export const localize = (string, values) => - i18n.t(crc32(string), { defaultValue: string, ...values }) +export const localize = (string, values) => t(crc32(string), { defaultValue: string, ...values }) export default i18n diff --git a/src/images/common/affiliate-and-ib/dmt5-financial-calculator-two.png b/src/images/common/affiliate-and-ib/dmt5-financial-calculator-two.png index 9a9a2d54fe0..20ef37bbd70 100644 Binary files a/src/images/common/affiliate-and-ib/dmt5-financial-calculator-two.png and b/src/images/common/affiliate-and-ib/dmt5-financial-calculator-two.png differ diff --git a/src/images/common/affiliate-and-ib/dmt5-financial-stp-calculator-two.png b/src/images/common/affiliate-and-ib/dmt5-financial-stp-calculator-two.png index 9040ece1f2c..20ef37bbd70 100644 Binary files a/src/images/common/affiliate-and-ib/dmt5-financial-stp-calculator-two.png and b/src/images/common/affiliate-and-ib/dmt5-financial-stp-calculator-two.png differ diff --git a/src/images/common/image-not-available.png b/src/images/common/image-not-available.png new file mode 100644 index 00000000000..3a7ae65c034 Binary files /dev/null and b/src/images/common/image-not-available.png differ diff --git a/src/images/svg/image-not-available.svg b/src/images/svg/image-not-available.svg new file mode 100644 index 00000000000..5a4a49bbe41 --- /dev/null +++ b/src/images/svg/image-not-available.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 19516836d3c..cd6cb4fbb22 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,27 +1,15 @@ import React from 'react' import styled from 'styled-components' -import { graphql, useStaticQuery } from 'gatsby' import { isBrowser } from 'common/utility' import { SEO } from 'components/containers' import Layout from 'components/layout/layout' -import { Header, Text, QueryImage } from 'components/elements' +import { Header } from 'components/elements' import { localize, WithIntl } from 'components/localization' import { LinkButton } from 'components/form' +import ImageNotAvailable from 'images/svg/image-not-available.svg' -const query = graphql` - query { - page_not_found: file(relativePath: { eq: "page-not-found.png" }) { - ...fadeIn - } - } -` - -const ImageWrapper = styled.div` - width: 100%; - max-width: 59.4rem; -` const PageNotFoundContainerInfo = styled.div` - margin-left: 2.4rem; + margin: 16px; * { margin: 1.6rem 0; @@ -34,13 +22,14 @@ const PageNotFoundContainer = styled.div` align-items: center; padding: 16rem 0; flex-wrap: wrap; + flex-direction: column; ` const ButtonWrapper = styled.div` - margin-top: 2.6rem; + margin-top: 3rem; + text-align: center; ` const PageNotFound = () => { - const data = useStaticQuery(query) return ( isBrowser() && ( @@ -49,27 +38,26 @@ const PageNotFound = () => { description={localize('The page you are looking for does not exist.')} /> - - - + {localize('Page -
- {localize("This channel doesn't work")} +
+ {localize('We couldn’t find that page')}
- +
{localize( - 'You may have followed a broken link, or the page has moved to a new address.', + 'It may not be available in your country, or maybe a broken link has brought you here.', )} - - {localize('Error code: 404 page not found')} +
+ - {localize('Go to the homepage')} + {localize('Visit our homepage')} diff --git a/src/pages/academy/_recent-featured-posts.js b/src/pages/academy/_recent-featured-posts.js index f26e281b2aa..4f78f06d543 100644 --- a/src/pages/academy/_recent-featured-posts.js +++ b/src/pages/academy/_recent-featured-posts.js @@ -66,7 +66,7 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { - {headline_recent.tags.map((article) => { + {headline_recent.tags.slice(0, 3).map((article) => { return ( @@ -149,15 +149,17 @@ const RecentFeaturedPosts = ({ recent_data, featured_data }) => { > - {headline_featured.tags.map((article) => { - return ( - - - {article.tags_id?.tag_name} - - - ) - })} + {headline_featured.tags + .slice(0, 3) + .map((article) => { + return ( + + + {article.tags_id?.tag_name} + + + ) + })}
{headline_featured.blog_title} diff --git a/src/pages/academy/components/recent-featured-posts/_style.js b/src/pages/academy/components/recent-featured-posts/_style.js index 6296aad0563..ee2cf16f683 100644 --- a/src/pages/academy/components/recent-featured-posts/_style.js +++ b/src/pages/academy/components/recent-featured-posts/_style.js @@ -16,6 +16,10 @@ export const StyledContainer = styled(Flex)` @media ${device.laptopM} { max-width: 58.8rem; } + + @media ${device.mobileL} { + width: 100%; + } ` export const StyledTabs = styled(Tabs)` @@ -26,10 +30,16 @@ export const ArticleContentWrapper = styled(Container)` margin-top: 24px; color: var(--color-white); width: 100%; + @media ${device.laptopM} { flex-direction: column; width: 100%; } + + @media ${device.mobileL} { + margin: 24px auto 0; + padding: 0 16px 0 18px; + } ` export const LeftContent = styled(Flex)` @@ -291,6 +301,11 @@ export const AllArticleButton = styled(LinkButton)` @media ${device.laptopM} { width: 100%; } + + @media ${device.mobileL} { + width: 90%; + margin-top: 24px; + } ` export const RedirectLink = styled(LocalizedLink)` diff --git a/src/pages/careers/_model/_locations/_locations.ts b/src/pages/careers/_model/_locations/_locations.ts index ade795a3c4a..a4d4ab95738 100644 --- a/src/pages/careers/_model/_locations/_locations.ts +++ b/src/pages/careers/_model/_locations/_locations.ts @@ -368,16 +368,16 @@ export const guernsey = { has_iframe: false, } export const all_offices: locationsTypes[] = [ - london, dubai, - paris, malta, cyprus, - guernsey, cyberjaya, labuan, ipoh, melaka, + london, + paris, + guernsey, asuncion, rwanda, minsk, diff --git a/src/pages/dmt5/_why-trader.tsx b/src/pages/dmt5/_why-trader.tsx index 49d00c9d5d1..dce322046a0 100644 --- a/src/pages/dmt5/_why-trader.tsx +++ b/src/pages/dmt5/_why-trader.tsx @@ -12,7 +12,7 @@ import device from 'themes/device' type CardContentType = { header: React.ReactElement text: React.ReactElement - image: any // Sean declared content as any + image: string key: number } diff --git a/src/pages/interim/_love-trading.tsx b/src/pages/interim/_love-trading.tsx index 91f03d99876..58c180897a7 100644 --- a/src/pages/interim/_love-trading.tsx +++ b/src/pages/interim/_love-trading.tsx @@ -133,7 +133,7 @@ const LeftCTASection = (params: LeftCTASectionProps) => { } type RightCTASectionProps = LeftCTASectionProps & { - button_props?: any + button_props?: unknown } const RightCTASection = (params: RightCTASectionProps) => { 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` width: 689px; display: flex; flex-direction: column; @@ -54,7 +68,7 @@ const MobileImageWrapper = styled(Container)` } ` -const ImageWrapper = styled(Flex)` +const ImageWrapper = styled(Flex)` 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` 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 ( {trading.map((item, index) => { - let is_even = reverse ? (index + 1) % 2 : index % 2 + const is_even = reverse ? (index + 1) % 2 : index % 2 return ( { > {item.title} {item.subtitle} - {two_title && ( - <> - - {item.second_title} - - {item.second_subtitle} - - )} {item.image_name_mobile && ( @@ -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..7ad054dfc9b 100644 --- a/src/pages/landing/stocks/_footerBanner.js +++ b/src/pages/landing/stocks/_footerBanner.tsx @@ -1,11 +1,10 @@ -import React from 'react' +import React, { ReactElement } from 'react' import styled from 'styled-components' -import PropTypes from 'prop-types' +import type { ImageDataLike } from 'gatsby-plugin-image' 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 +127,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: ImageDataLike } +} + +const FooterBanner = ({ + background_pattern, + data, + is_ppc, + small_title, + title, +}: FooterBannerProps) => { return ( @@ -194,12 +207,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)` 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` 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` 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 ( {trading.map((item, index) => { - let is_even = reverse ? (index + 1) % 2 : index % 2 + const is_even = reverse ? (index + 1) % 2 : index % 2 return ( {item.title} {item.subtitle} - {two_title && ( - <> - - {item.second_title} - - {item.second_subtitle} - - )} {item.image_name && ( @@ -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} - {item.desc && {item.desc}} ) })} @@ -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 ( { +const query = graphql` + query { + p2p_hero_background: file(relativePath: { eq: "landing/weekend.png" }) { + ...fadeIn + } + p2p_hero_background_mobile: file(relativePath: { eq: "landing/weekend-m.png" }) { + ...fadeIn + } + } +` + +const Hero = () => { + const data = useStaticQuery(query) + const [is_mobile] = useBrowserResize() + const background = is_mobile ? data['p2p_hero_background_mobile'] : data['p2p_hero_background'] + return ( - + - {title} + + {localize('Ride the trends even on weekends')} + -
{content}
+
+ { + + } +
{ ) } -const query = graphql` - query { - p2p_hero_background: file(relativePath: { eq: "landing/weekend.png" }) { - ...fadeIn - } - p2p_hero_background_mobile: file(relativePath: { eq: "landing/weekend-m.png" }) { - ...fadeIn - } - } -` - -const Hero = ({ title, content }) => { - const data = useStaticQuery(query) - - return ( -
- - - - - - -
- ) -} - -HeroComponent.propTypes = { - background_data: PropTypes.any, - content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - title: PropTypes.string, -} - -Hero.propTypes = { - content: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - title: PropTypes.string, -} - export default Hero diff --git a/src/pages/landing/weekend-trading/components/_icon-text-row.js b/src/pages/landing/weekend-trading/components/_icon-text-row.tsx similarity index 100% rename from src/pages/landing/weekend-trading/components/_icon-text-row.js rename to src/pages/landing/weekend-trading/components/_icon-text-row.tsx diff --git a/src/pages/landing/weekend-trading/components/_image-text-switching.js b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx similarity index 63% rename from src/pages/landing/weekend-trading/components/_image-text-switching.js rename to src/pages/landing/weekend-trading/components/_image-text-switching.tsx index 684e70fafc2..17888db83ac 100644 --- a/src/pages/landing/weekend-trading/components/_image-text-switching.js +++ b/src/pages/landing/weekend-trading/components/_image-text-switching.tsx @@ -1,12 +1,20 @@ import React 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, Show } from 'components/containers' +import device, { size } from 'themes/device' +import { Container, SectionContainer } from 'components/containers' import { Header, Text, QueryImage } from 'components/elements' import { localize } from 'components/localization' import { isIndexEven } from 'common/utility' +import { useBrowserResize } from 'components/hooks/use-browser-resize' + +type ImageWrapperProps = { + margin_right: string +} + +type RowProps = { + flex_direction: string +} const StyledSection = styled(SectionContainer)` @media ${device.tabletL} { @@ -18,7 +26,7 @@ const StyledContainer = styled(Container)` width: 100%; } ` -const Content = styled.div` +const Content = styled.div` display: flex; flex-direction: column; justify-content: center; @@ -38,7 +46,7 @@ const Content = styled.div` } ` -const ImageWrapper = styled.div` +const ImageWrapper = styled.div` max-width: 47.1rem; width: 100%; max-height: 30rem; @@ -60,7 +68,7 @@ const StyledText = styled(Text)` line-height: 30px; } ` -const Row = styled.div` +const Row = styled.div` flex-direction: ${(props) => props.flex_direction}; width: 100%; display: flex; @@ -86,8 +94,26 @@ const query = graphql` } } ` -const ImageTextSwitching = ({ P2P, reverse, two_title }) => { + +type P2PType = { + title: React.ReactElement + subtitle1: React.ReactElement + subtitle2: React.ReactElement + subtitle_mobile1: React.ReactElement + subtitle_mobile2: React.ReactElement + image_name: string + image_alt: string +} + +type ImageTextSwitchingProps = { + P2P: P2PType[] + reverse: boolean +} + +const ImageTextSwitching = ({ P2P, reverse }: ImageTextSwitchingProps) => { const data = useStaticQuery(query) + const [is_tabletL] = useBrowserResize(size.tabletL) + return ( @@ -102,38 +128,24 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => { {P2P.map((item, index) => { - let is_even = isIndexEven(index, reverse) + const is_even = isIndexEven(index, reverse) return ( - + {item.title} - - - {item.subtitle1} - - - - {item.subtitle2} - - - {item.subtitle_mobile1} - - - {item.subtitle_mobile2} - - {two_title && ( + {is_tabletL ? ( <> - - {item.second_title} - - {item.second_subtitle1} - {item.second_subtitle2} + {item.subtitle_mobile1} + {item.subtitle_mobile2} + + ) : ( + <> + + {item.subtitle1} + + {item.subtitle2} )} @@ -152,10 +164,4 @@ const ImageTextSwitching = ({ P2P, reverse, two_title }) => { ) } -ImageTextSwitching.propTypes = { - P2P: PropTypes.array, - reverse: PropTypes.bool, - two_title: PropTypes.bool, -} - export default ImageTextSwitching diff --git a/src/pages/landing/weekend-trading/components/_title-btn.js b/src/pages/landing/weekend-trading/components/_title-btn.tsx similarity index 90% rename from src/pages/landing/weekend-trading/components/_title-btn.js rename to src/pages/landing/weekend-trading/components/_title-btn.tsx index 2d44846944f..0e00c2b7d17 100644 --- a/src/pages/landing/weekend-trading/components/_title-btn.js +++ b/src/pages/landing/weekend-trading/components/_title-btn.tsx @@ -1,6 +1,5 @@ import React from 'react' import styled from 'styled-components' -import PropTypes from 'prop-types' import device from 'themes/device' import { Container, SectionContainer } from 'components/containers' import { Text } from 'components/elements' @@ -37,7 +36,12 @@ const TryButton = styled(LinkButton)` } ` -const Titlebtn = ({ btnlabel, text }) => { +type TitlebtnProps = { + btnlabel: string + text: string +} + +const Titlebtn = ({ btnlabel, text }: TitlebtnProps) => { return ( @@ -59,9 +63,4 @@ const Titlebtn = ({ btnlabel, text }) => { ) } -Titlebtn.propTypes = { - btnlabel: PropTypes.string, - text: PropTypes.string, -} - export default Titlebtn diff --git a/src/pages/landing/weekend-trading/index.js b/src/pages/landing/weekend-trading/index.tsx similarity index 92% rename from src/pages/landing/weekend-trading/index.js rename to src/pages/landing/weekend-trading/index.tsx index 2811dd927a0..832b72f4f55 100644 --- a/src/pages/landing/weekend-trading/index.js +++ b/src/pages/landing/weekend-trading/index.tsx @@ -29,7 +29,6 @@ const DP2P_CONTENT = [ subtitle_mobile2: ( ), - image_name: 'buy_sell', image_alt: localize('Buy and sell'), }, @@ -66,12 +65,7 @@ const WeekenLP = () => { title={localize('Weekends')} description={localize('Ride the trends even on weekends')} /> - - } - /> + { - const { is_eu_country } = React.useContext(DerivStore) return ( @@ -134,14 +132,8 @@ const DerivIBProgramme = () => { - - + + , - list: [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - ], + list: [], }, { title: , - list: [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - ], + list: [], }, ], }, @@ -441,66 +393,6 @@ const ib_dmt5_financial = { ], } -const ib_dmt5_financial_non_eu = { - ...ib_dmt5_financial, - type: [ - { - title: , - headerHeight: '8.0rem', - assets: [ - { - title: , - list: [ - , - , - ], - }, - { - title: , - list: [ - , - , - ], - }, - ], - }, - { - title: , - headerHeight: '6.4rem', - assets: [ - { - title: , - list: [ - , - , - ], - }, - { - title: , - list: [ - , - , - ], - }, - ], - }, - { - title: , - headerHeight: '6.4rem', - assets: [ - { - title: , - list: [], - }, - { - title: , - list: [], - }, - ], - }, - ], -} - const ib_dmt5_financialSTP = { name: , description: ( @@ -532,51 +424,11 @@ const ib_dmt5_financialSTP = { assets: [ { title: , - list: [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - ], + list: [], }, { title: , - list: [ - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - ], + list: [], }, ], }, @@ -617,42 +469,4 @@ const ib_dmt5_financialSTP = { ], } -const ib_dmt5_financialSTP_non_eu = { - ...ib_dmt5_financialSTP, - type: [ - { - title: , - headerHeight: '8.0rem', - assets: [ - { - title: , - list: [], - }, - { - title: ( - - ), - list: [], - }, - ], - }, - { - title: , - headerHeight: '6.4rem', - assets: [ - { - title: , - list: [], - }, - { - title: , - list: [], - }, - ], - }, - ], -} export default DerivIBProgramme diff --git a/src/pages/partners/affiliate-ib/_minimum-volume.js b/src/pages/partners/affiliate-ib/_minimum-volume.js index cd1954c4295..7cea7ddf0ca 100644 --- a/src/pages/partners/affiliate-ib/_minimum-volume.js +++ b/src/pages/partners/affiliate-ib/_minimum-volume.js @@ -112,7 +112,7 @@ const MinimumVolume = () => { - + @@ -151,14 +151,14 @@ const firstCalculatedFormula = { next_operator: '÷', }, { - item: '20', + item: '10', description: , }, ], result: { total: ( ]} /> ), @@ -168,7 +168,7 @@ const firstCalculatedFormula = { totalItem: 2, formula: [ { - item: 'USD 50', + item: 'USD 100', description: , next_operator: '÷', }, @@ -180,7 +180,7 @@ const firstCalculatedFormula = { result: { total: ( ]} /> ), diff --git a/src/pages/partners/payment-agent/_faq-data.js b/src/pages/partners/payment-agent/_faq-data.tsx similarity index 98% rename from src/pages/partners/payment-agent/_faq-data.js rename to src/pages/partners/payment-agent/_faq-data.tsx index d6ef02ef6ed..09b27db195c 100644 --- a/src/pages/partners/payment-agent/_faq-data.js +++ b/src/pages/partners/payment-agent/_faq-data.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { HeaderPrimary, TextPrimary, LocalizedLinkText } from '../affiliate-ib/_faq-data' import { Header, LinkText } from 'components/elements' import { localize, Localize } from 'components/localization' -import { DerivStore } from 'store' +import { DerivStore, DerivStoreType } from 'store' const TextLink = styled(LinkText).attrs({ as: 'span' })`` @@ -60,7 +60,8 @@ const General = () => ( ) const AccountManagement = () => { - const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = useContext(DerivStore) + const { is_livechat_interactive, LC_API, setFirstLoadOpenLc } = + useContext(DerivStore) return ( <> diff --git a/src/pages/partners/payment-agent/_faq-schema.js b/src/pages/partners/payment-agent/_faq-schema.ts similarity index 91% rename from src/pages/partners/payment-agent/_faq-schema.js rename to src/pages/partners/payment-agent/_faq-schema.ts index 101059096d9..81e2028a7af 100644 --- a/src/pages/partners/payment-agent/_faq-schema.js +++ b/src/pages/partners/payment-agent/_faq-schema.ts @@ -1,5 +1,24 @@ import { localize } from 'components/localization' -export const faq_schema = { + +type contentType = 'FAQPage' | 'Question' | 'Answer' + +type AcceptedAnswerType = { + '@type': contentType + text: string +} + +type MainEntityType = { + '@type': contentType + name: string + acceptedAnswer: AcceptedAnswerType +} + +type FaqSchemaType = { + '@context': string + '@type': contentType + mainEntity: MainEntityType[] +} +export const faq_schema: FaqSchemaType = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: [ diff --git a/src/pages/partners/payment-agent/_faq.js b/src/pages/partners/payment-agent/_faq.tsx similarity index 100% rename from src/pages/partners/payment-agent/_faq.js rename to src/pages/partners/payment-agent/_faq.tsx diff --git a/src/pages/partners/payment-agent/_hero.js b/src/pages/partners/payment-agent/_pa-hero.tsx similarity index 100% rename from src/pages/partners/payment-agent/_hero.js rename to src/pages/partners/payment-agent/_pa-hero.tsx diff --git a/src/pages/partners/payment-agent/_tap-into.js b/src/pages/partners/payment-agent/_tap-into.tsx similarity index 100% rename from src/pages/partners/payment-agent/_tap-into.js rename to src/pages/partners/payment-agent/_tap-into.tsx diff --git a/src/pages/partners/payment-agent/_who-can-apply.js b/src/pages/partners/payment-agent/_who-can-apply.tsx similarity index 77% rename from src/pages/partners/payment-agent/_who-can-apply.js rename to src/pages/partners/payment-agent/_who-can-apply.tsx index bed3e4393f6..c90c4c7f7e7 100644 --- a/src/pages/partners/payment-agent/_who-can-apply.js +++ b/src/pages/partners/payment-agent/_who-can-apply.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { ReactElement } from 'react' import styled from 'styled-components' import { StyledSection, @@ -12,7 +12,7 @@ import { SecondaryHeader, } from '../affiliate-ib/_who-can-apply' import { Flex } from 'components/containers' -import { localize } from 'components/localization' +import { localize, Localize } from 'components/localization' import { Header, Text, Timeline } from 'components/elements' import { LinkButton } from 'components/form' import TradingExperts from 'images/svg/partners/trading-experts.svg' @@ -70,7 +70,47 @@ const ButtonWrapper = styled(CenteredSection)` display: flex; justify-content: center; ` +type SectionComponentProps = { + img_src: string + header: ReactElement + text: ReactElement +} + +const section_content: SectionComponentProps[] = [ + { + img_src: TradingExperts, + header: , + text: ( + + ), + }, + { + img_src: Affiliates, + header: , + text: , + }, + { + img_src: CommunityManagers, + header: , + text: ( + + ), + }, +] +const SectionComponent = ({ img_src, header, text }: SectionComponentProps) => { + return ( + + + +
+ {header} +
+ {text} + + + ) +} const WhoCanApply = () => { return ( @@ -80,48 +120,18 @@ const WhoCanApply = () => { {localize('Who can apply')} - - - -
- {localize('Currency exchangers')} -
- - {localize( - 'Reputable online currency exchangers who want to gain more exposure and clients.', - )} - - - - - - -
- {localize('Affiliates')} -
- - {localize( - 'Deriv affiliates who want to support their clients.', - )} - - - - - - -
- {localize('Community managers')} -
- - {localize( - 'Trusted influencers or community managers who want to earn extra revenue.', - )} - - - + {section_content.map((item, index) => ( + + ))} + {/* how to apply section */} diff --git a/src/pages/partners/payment-agent/_your-control.js b/src/pages/partners/payment-agent/_your-control.tsx similarity index 65% rename from src/pages/partners/payment-agent/_your-control.js rename to src/pages/partners/payment-agent/_your-control.tsx index 8391a493912..478e5f17299 100644 --- a/src/pages/partners/payment-agent/_your-control.js +++ b/src/pages/partners/payment-agent/_your-control.tsx @@ -1,7 +1,7 @@ -import React from 'react' +import React, { ReactElement } from 'react' import styled from 'styled-components' import { Container, SectionContainer, Flex, CssGrid } from 'components/containers' -import { localize } from 'components/localization' +import { localize, Localize } from 'components/localization' import { Header, Text } from 'components/elements' import device from 'themes/device' // SVG @@ -58,6 +58,32 @@ const StyledText = styled(Text)` } ` +type CardItemType = { + img_src: string + card_text: ReactElement +} +const cardItems: CardItemType[] = [ + { + img_src: Comission, + card_text: ( + + ), + }, + { + img_src: LoudSpeaker, + card_text: ( + + ), + }, + { + img_src: WithdrawDeposit, + card_text: , + }, + { + img_src: CloseAccount, + card_text: , + }, +] const YourControl = () => { return ( @@ -78,32 +104,12 @@ const YourControl = () => { mobile_columns="1fr" mobile_row_gap="16px" > - - - - {localize( - 'Determine your commission per transaction, subject to our established thresholds.', - )} - - - - - - {localize( - 'Choose which countries to service, and promote your services your way.', - )} - - - - - - {localize('Perform multiple deposits and withdrawals per day.')} - - - - - {localize('Close your account at any time you want.')} - + {cardItems.map((item, index) => ( + + {''} + {item.card_text} + + ))} diff --git a/src/pages/partners/payment-agent/index.js b/src/pages/partners/payment-agent/index.tsx similarity index 95% rename from src/pages/partners/payment-agent/index.js rename to src/pages/partners/payment-agent/index.tsx index 04ea8604ab1..e85afed7a40 100644 --- a/src/pages/partners/payment-agent/index.js +++ b/src/pages/partners/payment-agent/index.tsx @@ -1,9 +1,9 @@ import React from 'react' import Loadable from '@loadable/component' import { Helmet } from 'react-helmet' -import Hero from './_hero' +import Hero from './_pa-hero' import TapInto from './_tap-into' -import { faq_schema } from './_faq-schema.js' +import { faq_schema } from './_faq-schema' import Layout from 'components/layout/layout' import { SEO } from 'components/containers' import { localize, WithIntl } from 'components/localization' diff --git a/src/store/index.tsx b/src/store/index.tsx index 222b09acb22..ff5713b7ab2 100644 --- a/src/store/index.tsx +++ b/src/store/index.tsx @@ -10,12 +10,12 @@ type DerivProviderProps = { type WebsiteStatusType = { clients_country: string - crypto_config: any + crypto_config: unknown } export type DerivStoreType = { academy_data: AcademyDataType - crypto_config: any + crypto_config: unknown is_eu_country: boolean is_livechat_interactive: boolean is_loading_lc: boolean