chore: updated contact us and careers page

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 (
         <Flex ai="center" height="unset">
             <EmployeeCard>
@@ -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',

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 (
         <BackgroundImageWrapper dark_background>

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 (
-        <ImageWrapper>
-            <img src={img_path} alt={img_alt} loading="lazy" />
-        </ImageWrapper>
-    )
-}
-
-ImageSlide.propTypes = {
-    img_alt: PropTypes.string,
-    img_path: PropTypes.string,
-}
-
 const LifeAtDerivCarousel = () => {
     return (
         <>

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) => (
     <StyledTipsCard direction="column" right={right} style={style}>
         <Flex direction="row" mb="1.3rem" jc="flex-start">
             <TipsRounded src={TipIcon} alt="career1" />
@@ -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) => (
     <ProcessWrapper direction="column" style={style}>
         <SecondaryHeader as="h2" type="page-title">
             {title}
@@ -294,7 +305,7 @@ const StyledLinkText = styled(LinkText)`
 `
 
 const OurHiringProcess = () => {
-    const { is_eu } = useRegion()
+    const {region} = useBuildVariant();
     return (
         <StyledSectionContainer>
             <Container direction="column">
@@ -401,7 +412,7 @@ const OurHiringProcess = () => {
                     See all jobs
                 </StyledLinkButton>
             </StyledContainer>
-            {is_eu && (
+            {region === "eu" && (
                 <Container>
                     <StyledText mt="8rem">
                         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

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 = () => (
-    <Layout type="careers">
-        <Hero />
-        <WhoWeLookFor />
-        <JoinYourTeam />
-        <OurValues />
-        <LifeAtDerivCarousel />
-        <EmployeeTestimonial />
-        <OurHiringProcess />
-    </Layout>
-)
+const Careers = ({pageContext}: TGatsbyHead) => {
+    const {region} = pageContext
+    return(
+        <Layout region={region} type="careers">
+            <Hero />
+            <WhoWeLookFor />
+            <JoinYourTeam />
+            <OurValues />
+            <LifeAtDerivCarousel />
+            <EmployeeTestimonial />
+            <OurHiringProcess />
+        </Layout>
+    )
+}
 
 export default WithIntl()(Careers)
 

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 (
-        <Layout>
+        <Layout region={region}>
             <SectionContainer tablet={{ p: '40px 0' }}>
                 <HeroWrapper fd="column">
                     <Header align="center" as="h1" type="display-title">

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 (
-        <Layout>
+        <Layout region={region}>
             <Section>
                 <GridContainer>
                     <ResponsiveHeader as="h1" type="display-title" align="center">