From 7596c09d633a5949dda5558160112b6a107bda20 Mon Sep 17 00:00:00 2001 From: hasan-deriv Date: Fri, 1 Mar 2024 11:12:01 +0800 Subject: [PATCH] chore: updated contact us and careers page --- .../_employee-testimonial-carousel.tsx | 18 ++++----- .../src/pages/careers/_hero.tsx | 4 +- .../pages/careers/_life-at-deriv-carousel.tsx | 14 ------- .../src/pages/careers/_our-hiring-process.tsx | 37 +++++++++---------- .../src/pages/careers/index.tsx | 25 +++++++------ .../src/pages/contact_us/index.tsx | 7 +++- .../src/pages/why-choose-us/index.tsx | 5 ++- 7 files changed, 50 insertions(+), 60 deletions(-) diff --git a/themes/gatsby-theme-deriv/src/pages/careers/_employee-testimonial-carousel.tsx b/themes/gatsby-theme-deriv/src/pages/careers/_employee-testimonial-carousel.tsx index fcdb058c786..fce648c84e3 100644 --- a/themes/gatsby-theme-deriv/src/pages/careers/_employee-testimonial-carousel.tsx +++ b/themes/gatsby-theme-deriv/src/pages/careers/_employee-testimonial-carousel.tsx @@ -1,6 +1,5 @@ import React from 'react' import styled from 'styled-components' -import PropTypes from 'prop-types' import { Carousel, CarouselProps, Header, Text } from 'components/elements' import device from 'themes/device' import { SectionContainer, Flex } from 'components/containers' @@ -85,7 +84,14 @@ const StyledImg = styled.img` height: 100%; ` -const EmployeeSlide = ({ quote, img_path, img_alt, name }) => { +type EmployeeSlideProps = { + img_alt: string + img_path: string + name: string + quote: string +} + +const EmployeeSlide = ({ quote, img_path, img_alt, name }: EmployeeSlideProps) => { return ( @@ -106,14 +112,6 @@ const EmployeeSlide = ({ quote, img_path, img_alt, name }) => { ) } -EmployeeSlide.propTypes = { - img_alt: PropTypes.string, - img_path: PropTypes.string, - name: PropTypes.string, - quote: PropTypes.string, - title: PropTypes.string, -} - const ahmad = { name: 'Ahmad Aizuddin, Disaster Recovery Analyst', img_alt: 'Ahmad Aizuddin Disaster Recovery Analyst at Deriv', diff --git a/themes/gatsby-theme-deriv/src/pages/careers/_hero.tsx b/themes/gatsby-theme-deriv/src/pages/careers/_hero.tsx index b18eea883a8..9128fd260c9 100644 --- a/themes/gatsby-theme-deriv/src/pages/careers/_hero.tsx +++ b/themes/gatsby-theme-deriv/src/pages/careers/_hero.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useContext } from 'react' import styled from 'styled-components' import { StaticImage } from 'gatsby-plugin-image' import Container from './_layout-components/_career_container' @@ -75,7 +75,7 @@ const StyledLinkButton = styled(LinkButton)` ` const Hero = () => { - const { has_mounted } = React.useContext(LocationContext) + const { has_mounted } = useContext(LocationContext) return ( diff --git a/themes/gatsby-theme-deriv/src/pages/careers/_life-at-deriv-carousel.tsx b/themes/gatsby-theme-deriv/src/pages/careers/_life-at-deriv-carousel.tsx index ee4753317e9..799a7632ef8 100644 --- a/themes/gatsby-theme-deriv/src/pages/careers/_life-at-deriv-carousel.tsx +++ b/themes/gatsby-theme-deriv/src/pages/careers/_life-at-deriv-carousel.tsx @@ -1,6 +1,5 @@ import React from 'react' import styled from 'styled-components' -import PropTypes from 'prop-types' import { Header } from 'components/elements' import device from 'themes/device' import { Container, SectionContainer, Desktop, Mobile } from 'components/containers' @@ -120,19 +119,6 @@ const MobileSingleImage = styled.div` } ` -const ImageSlide = ({ img_path, img_alt }) => { - return ( - - {img_alt} - - ) -} - -ImageSlide.propTypes = { - img_alt: PropTypes.string, - img_path: PropTypes.string, -} - const LifeAtDerivCarousel = () => { return ( <> diff --git a/themes/gatsby-theme-deriv/src/pages/careers/_our-hiring-process.tsx b/themes/gatsby-theme-deriv/src/pages/careers/_our-hiring-process.tsx index 6ddeede136d..fafe95844f6 100644 --- a/themes/gatsby-theme-deriv/src/pages/careers/_our-hiring-process.tsx +++ b/themes/gatsby-theme-deriv/src/pages/careers/_our-hiring-process.tsx @@ -1,5 +1,4 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React, { CSSProperties } from 'react' import styled, { css } from 'styled-components' import { zoho_url } from 'common/constants' // SVG @@ -14,7 +13,7 @@ import { Text, Header, LinkText } from 'components/elements' import { LinkButton } from 'components/form' import device from 'themes/device' import TipIcon from 'images/svg/careers/career-tip.svg' -import useRegion from 'components/hooks/use-region' +import useBuildVariant from 'features/hooks/use-build-variant' const StyledSectionContainer = styled(SectionContainer)` padding: 8rem 0 5rem 0; @@ -110,7 +109,13 @@ const StyledContainer = styled(Container)` align-items: center; ` -const TipsCard = ({ content, right, style }) => ( +type TipsCardProps = { + content: string + right?: boolean + style: CSSProperties +} + +const TipsCard = ({ content, right, style }: TipsCardProps) => ( @@ -148,7 +153,13 @@ const ProcessWrapper = styled(Flex)` } ` -const Process = ({ title, description, style }) => ( +type ProcessProps = { + description: string, + style: CSSProperties, + title: string, +} + +const Process = ({ title, description, style }: ProcessProps) => ( {title} @@ -294,7 +305,7 @@ const StyledLinkText = styled(LinkText)` ` const OurHiringProcess = () => { - const { is_eu } = useRegion() + const {region} = useBuildVariant(); return ( @@ -401,7 +412,7 @@ const OurHiringProcess = () => { See all jobs - {is_eu && ( + {region === "eu" && ( Please read this @@ -422,16 +433,4 @@ const OurHiringProcess = () => { ) } -Process.propTypes = { - description: PropTypes.string, - style: PropTypes.object, - title: PropTypes.string, -} - -TipsCard.propTypes = { - content: PropTypes.string, - right: PropTypes.bool, - style: PropTypes.object, -} - export default OurHiringProcess diff --git a/themes/gatsby-theme-deriv/src/pages/careers/index.tsx b/themes/gatsby-theme-deriv/src/pages/careers/index.tsx index b7d1bc3deed..decfcbe6a7e 100644 --- a/themes/gatsby-theme-deriv/src/pages/careers/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/careers/index.tsx @@ -18,17 +18,20 @@ const meta_attributes = { og_description: 'Join our incredible team where your growth is just as important as ours.', } -const Careers = () => ( - - - - - - - - - -) +const Careers = ({pageContext}: TGatsbyHead) => { + const {region} = pageContext + return( + + + + + + + + + + ) +} export default WithIntl()(Careers) diff --git a/themes/gatsby-theme-deriv/src/pages/contact_us/index.tsx b/themes/gatsby-theme-deriv/src/pages/contact_us/index.tsx index c06e4c01d27..790796454fe 100644 --- a/themes/gatsby-theme-deriv/src/pages/contact_us/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/contact_us/index.tsx @@ -35,7 +35,10 @@ const StyledText = styled(Text)` } ` -const ContactUs = ({ data }: TContactUs) => { +type ContactUsProps = TContactUs & TGatsbyHead + +const ContactUs = ({ data, pageContext }: ContactUsProps) => { + const {region} = pageContext const { hero, support_section, our_offices, office_address, business_partnership } = data?.strapiContactUs || {} @@ -44,7 +47,7 @@ const ContactUs = ({ data }: TContactUs) => { useOpenLiveChat(true) return ( - +
diff --git a/themes/gatsby-theme-deriv/src/pages/why-choose-us/index.tsx b/themes/gatsby-theme-deriv/src/pages/why-choose-us/index.tsx index 89d2a3ed3d5..08b4a73e93c 100644 --- a/themes/gatsby-theme-deriv/src/pages/why-choose-us/index.tsx +++ b/themes/gatsby-theme-deriv/src/pages/why-choose-us/index.tsx @@ -59,12 +59,13 @@ const ResponsiveHeader = styled(StyledHeader)` } ` -const WhyChooseUs = () => { +const WhyChooseUs = ({pageContext}: TGatsbyHead) => { + const {region} = pageContext const { is_latam, is_africa } = useRegion() const handleSignup = useHandleSignup() return ( - +