Agrim/DPROD-3954 senegal office (#7735)

* fix: adding senegal office

* fix: empty commit

* fix: adding in strapi

* fix: dakar

* auto-pull-translation

* translation: 📚 sync translations from crowdin feature branch

* fix: translations

* fix: senegal office

* fix: remove

* fix: remove

* fix: description

* fix: description

* fix: senegal sasu

---------

Co-authored-by: Agrim Jain <[email protected]>
Co-authored-by: DerivFE <[email protected]>

crowdin/messages.json

@@ -3416,11 +3416,11 @@
   "-1970911906": "Labuan clock tower",
   "-190370362": "Palace of the Lopez - Asuncion",
   "-1976016426": "Buildings near beach side - Limassol",
+  "-1255111333": "Vanuatu alt img",
   "-1775449118": "paris",
   "-2121505886": "Deriv’s Germany office at Berlin",
   "-140235062": "Deriv’s Reading office at United Kingdom",
   "-1979767490": "Deriv’s London office at United Kingdom",
-  "-1255111333": "Vanuatu alt img",
   "-334183701": "Deriv’s Cayman Islands office at George Town",
   "-1641202114": "Deriv’s British Virgin Islands office at Road Town",
   "-1439922490": "Jordan alt img",
@@ -3441,6 +3441,8 @@
   "-578762577": "Berlin - Our office | Deriv",
   "-2137963507": "Cyberjaya | Our office – Malaysia | Deriv",
   "-782151140": "Find your role with us by browsing Deriv job opportunities in Limassol, Cyprus.",
+  "-1671010764": "Dakar | Our office – Senegal | Deriv",
+  "-1756469949": "Find your role with us by browsing Deriv job opportunities in Dakar, Senegal.",
   "-2128417897": "Dubai | Our office – UAE | Deriv",
   "-1799144625": "Find your role with us by browsing Deriv job opportunities in Guernsey, Channel Islands.",
   "-470478500": "Check out the current open job positions at Deriv and get a chance to work with our team in Jordan for a thriving tech career.",

themes/gatsby-theme-deriv/src/pages/careers/_model/_locations/_contact-details.ts

@@ -62,6 +62,8 @@ const address_berlin = ['Kemperplatz 1 Mitte D, 10785 Berlin, Germany']
 
 const address_london = ['First Floor, 68 - 72 Leonard Street, London, EC2A 4QX']
 
+const address_dakar = ['66, boulevard de la République, Immeuble Seydou Nourou Tall, 1er étage, BP11417 Dakar, Sénégal']
+
 export {
     address_asuncion,
     address_cyberjaya,
@@ -84,4 +86,5 @@ export {
     address_reading,
     address_berlin,
     address_london,
+    address_dakar,
 }

themes/gatsby-theme-deriv/src/pages/careers/_model/_locations/_locations.tsx

@@ -22,6 +22,7 @@ import {
     address_reading,
     address_berlin,
     address_london,
+    address_dakar,
 } from './_contact-details'
 import { LocationsType } from './_locations.types'
 import MalaysiaFlagIcon from 'images/svg/careers/flag_malaysia.svg'
@@ -41,6 +42,7 @@ import JordanFlagIcon from 'images/svg/careers/flag_jordan.svg'
 import SingaporeFlagIcon from 'images/svg/careers/flag_singapore.svg'
 import { localize } from 'components/localization'
 import HongKong from 'images/svg/careers/flag_hongkong.svg'
+import SenegalFlag from 'images/common/careers/senegal_flag.png'
 
 export const cyberjaya: LocationsType = {
     name: 'cyberjaya',
@@ -427,6 +429,41 @@ export const rwanda: LocationsType = {
     has_iframe: true,
 }
 
+export const dakar: LocationsType = {
+    name: 'dakar',
+    hero_image: (
+        <StaticImage
+            src="../../../../images/common/careers/dakar.jpg"
+            alt={localize('_t_Vanuatu alt img_t_')}
+            formats={['avif', 'webp', 'auto']}
+            loading="eager"
+            style={{ width: '100%' }}
+        />
+    ),
+    job_location: 'Dakar',
+    continent: 'africa',
+    display_continent: 'Africa',
+    link: '/careers/locations/dakar/',
+    display_name: 'Dakar',
+    display_thumbnail_name: 'Dakar',
+    display_title_name: 'Dakar',
+    img_alt: 'Dakar picture',
+    map_office_name: '(Senegal) SASU',
+    country: 'Senegal',
+    flagIcon: SenegalFlag,
+    thumbnail: 'thumbnail_dakar',
+    first_p:
+        'Our Dakar office serves as a global customer support centre for Deriv. This strategic location enables us to provide dedicated, around-the-clock assistance to our diverse client base across Africa and beyond.',
+    first_img: 'living_in_dakar',
+    first_img_alt: 'Deriv’s Vanuatu office at Port Vila',
+    map: 'ChIJU5rXel5Z14cREREd888GBrw',
+    address: address_dakar,
+    map_text:
+        'We’re building a team of customer-focused professionals in our growing Dakar office. If you have strong problem-solving skills, a passion for client service, and thrive in a collaborative environment, join us for an excellent opportunity to make a global impact.',
+    google_map_link: 'https://maps.app.goo.gl/QHDRW2bFtMDyRKFn8',
+    has_iframe: true,
+    has_map: true,
+}
 export const paris: LocationsType = {
     name: 'paris',
     hero_image: (
@@ -495,12 +532,12 @@ export const guernsey: LocationsType = {
     first_img_alt: 'living_in_guernsey alt img',
     grid_images: ['guernsey_grid_1', 'guernsey_grid_2', 'guernsey_grid_3', 'guernsey_grid_4'],
     grid_img_alt: ['guernsey grid 1', 'guernsey grid 2', 'guernsey grid 3', 'guernsey grid 4'],
-    map: 'ChIJc-QshyFzDUgRy9q1rkkXFqs',
+    // map: 'ChIJc-QshyFzDUgRy9q1rkkXFqs',
     map_text:
         'Deriv (Guernsey) Ltd can be an ideal work environment for those who have strong attention to detail, motivation, and interest in law. Joining us at Guernsey gives you the opportunity to analyse regulatory policies, predict changes in fintech regulations, and formulate plans to ensure the efficiency of Deriv Group’s compliance strategies.',
     address: address_guernsey,
     map_img: 'guernsey_map',
-    google_map_link: 'https://goo.gl/maps/jX1D5CmysqtbMJeh6',
+    // google_map_link: 'https://goo.gl/maps/jX1D5CmysqtbMJeh6',
     has_map: true,
     has_iframe: true,
 }
@@ -914,6 +951,7 @@ export const all_offices: LocationsType[] = [
     ciudad,
     georgetown,
     roadtown,
+    dakar,
 ]
 export const locations = {
     berlin: `${berlin.display_name}, ${berlin.country}`,
@@ -937,6 +975,7 @@ export const locations = {
     hongkong: `${hongkong.display_name}, ${hongkong.country}`,
     georgetown: `${georgetown.display_name}, ${georgetown.country}`,
     roadtown: `${roadtown.display_name}, ${roadtown.country}`,
+    dakar: `${dakar.display_name}, ${dakar.country}`,
 }
 
 export const allContinents = {

themes/gatsby-theme-deriv/src/pages/careers/locations/_location-layout.tsx

@@ -414,32 +414,32 @@ export const LocationLayout = ({ location, images }: LocationLayoutProps) => {
                             <InnerLeftFlex mb="0.8rem">
                                 <First>
                                     <QueryImage
-                                        data={images[location.grid_images[0]]}
-                                        alt={location.grid_img_alt[0]}
+                                        data={images[location.grid_images?.[0]]}
+                                        alt={location.grid_img_alt?.[0]}
                                         width="100%"
                                     />
                                 </First>
                                 <Second>
                                     <QueryImage
-                                        data={images[location.grid_images[1]]}
-                                        alt={location.grid_img_alt[1]}
+                                        data={images[location.grid_images?.[1]]}
+                                        alt={location.grid_img_alt?.[1]}
                                         width="100%"
                                     />
                                 </Second>
                             </InnerLeftFlex>
                             <Third>
                                 <QueryImage
-                                    data={images[location.grid_images[2]]}
-                                    alt={location.grid_img_alt[2]}
+                                    data={images[location.grid_images?.[2]]}
+                                    alt={location.grid_img_alt?.[2]}
                                     width="100%"
                                 />
                             </Third>
                         </LeftFlex>
                         <RightFlex>
                             <Fourth>
                                 <QueryImage
-                                    data={images[location.grid_images[3]]}
-                                    alt={location.grid_img_alt[3]}
+                                    data={images[location.grid_images?.[3]]}
+                                    alt={location.grid_img_alt?.[3]}
                                     width="100%"
                                 />
                             </Fourth>

themes/gatsby-theme-deriv/src/pages/careers/locations/dakar/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+import { dakar } from '../../_model/_locations/_locations'
+import { NewLocationLayout } from '../_location-layout-new-offices'
+import { SEO } from 'components/containers'
+import Layout from 'components/layout/layout'
+import { WithIntl } from 'components/localization'
+import { TGatsbyHead } from 'features/types'
+
+const query = graphql`
+    query {
+        living_in_dakar: file(relativePath: { eq: "careers/living_in_senegal.png" }) {
+            ...fadeIn
+        }
+        senegal_map: file(relativePath: { eq: "careers/maps/map-senegal-career.png" }) {
+            ...fadeIn
+        }
+    }
+`
+
+const Dakar = ({ pageContext }: TGatsbyHead) => {
+    const {region} = pageContext
+    const images = useStaticQuery(query)
+
+    return (
+        <Layout region={region} type="careers">
+            <NewLocationLayout location={dakar} images = {images} />
+        </Layout>
+    )
+}
+
+export default WithIntl()(Dakar)
+
+export const Head = ({ pageContext }: TGatsbyHead) => (
+    <SEO
+        title="_t_Dakar | Our office – Senegal | Deriv_t_"
+        description="_t_Find your role with us by browsing Deriv job opportunities in Dakar, Senegal._t_"
+        pageContext={pageContext}
+    />
+)

themes/gatsby-theme-deriv/src/pages/careers/locations/index.tsx

@@ -289,6 +289,9 @@ const query = graphql`
         thumbnail_london: file(relativePath: { eq: "careers/thumbnail_london.jpg" }) {
             ...fadeIn
         }
+        thumbnail_dakar: file(relativePath: { eq: "careers/thumbnail_dakar.png" }) {
+            ...fadeIn
+        }
     }
 `