DONOTMERGE PRINCEHABIB: chore: MT translate POC

.husky/pre-commit

@@ -1,6 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run pre-commit-translate
 npm run pre-commit-lint
 

commitlint.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-    extends: ['@commitlint/config-conventional'],
-
     rules: {
         'type-enum': [
             2,

documents/translation-workflow.md

@@ -5,9 +5,8 @@ The purpose of this document is to explain the general workflow and commands req
 ---
 
 ### General workflow will be as such:
-⚠️ Note: If you're not managing the translations on Crowdin, the workflow usually stops at step #3.
 
-<br />
+⚠️ Note: If you're not managing the translations on Crowdin, the workflow usually stops at step #3.
 
 1. PR will be based on crowdin branch
 
@@ -19,7 +18,7 @@ The purpose of this document is to explain the general workflow and commands req
     git checkout -b [_your_branch_name]
     ```
 
-    -   if you have crowdin branch
+    - if you have crowdin branch
 
     ```sh
     git checkout crowdin
@@ -31,51 +30,49 @@ The purpose of this document is to explain the general workflow and commands req
 
 3. Once it passes QA, it will be merged into the Crowdin branch.
 
-<br />
-
 ### Extracting & Managing Translations:
 
 4. Extract translations from Crowdin branch
-    -   Make sure you have the latest crowdin changes, resolve conflicts if any
+
+    - Make sure you have the latest crowdin changes, resolve conflicts if any
 
     ```sh
     git pull upstream crowdin
     ```
 
-   -   Extract translation text to update `messages.json`
+    - Extract translation text to update `messages.json`
 
     ```sh
     npm run translate:extract
     ```
-    
-   -	Upload & download. This step uploads the text strings to Crowdin Platform (To be translated by translators) and downloads the latest `ach tags`.
-   
-   ```sh
-    npm run translate:upload
-    npm run translate:download
+
+    - Upload & download. This step uploads the text strings to Crowdin Platform (To be translated by translators) and downloads the latest `ach tags`.
+
+    ```sh
+     npm run translate:upload
+     npm run translate:download
     ```
 
-	 -	Commit your changes
+    - Commit your changes
 
 5. Make pull request
 
-   -   Push your changes to your origin, add `-u` flag for the first time push
-
-   ```sh
-   git push -u origin [_your_branch_name]
-   ```
+    - Push your changes to your origin, add `-u` flag for the first time push
 
-   -   Click on the autogenerated link from terminal to open the PR
+    ```sh
+    git push -u origin [_your_branch_name]
+    ```
 
-   -   Make sure to change the PR base to `crowdin` branch
+    - Click on the autogenerated link from terminal to open the PR
 
+    - Make sure to change the PR base to `crowdin` branch
 
 6. Download/get latest crowdin translations **(Once strings are translated on Crowdin Platform)**.
 
     ```sh
     npm run translate:download
     ```
-    
+
 7. Make pull request, get reviewed & merged (This triggers a build and redeploys an updated version of the crowdin test link with the new translated texts).
 
 8. The task now goes through a translation regression check to test for all other languages.
@@ -87,7 +84,7 @@ The purpose of this document is to explain the general workflow and commands req
 1. Create a PR from Crowdin to Master.
 2. Once approved and merged, the staging link will need to be tested for translations.
 3. Rebase Crowdin branch onto master & delete any irrelevant commits.
-⚠️ Note: Be very careful here and do take note to compare with the commits on master.
-   ```sh
-    git rebase --interactive
-   ```
+   ⚠️ Note: Be very careful here and do take note to compare with the commits on master.
+    ```sh
+     git rebase --interactive
+    ```

package.json

@@ -112,7 +112,6 @@
         "deploy-branch": "PATH_PREFIX=/deriv-com/br/$branch_name npm run build && gh-pages -d public -e br/$branch_name",
         "prepare": "husky install",
         "pre-commit-lint": "lint-staged",
-        "pre-commit-translate": "node scripts/translation-pre-commit.js",
         "type-check": "tsc --noEmit",
         "storybook": "npm run storybook --workspace gatsby-theme-deriv",
         "build:storybook": "npm run build:storybook --workspace gatsby-theme-deriv",

themes/gatsby-theme-deriv/gatsby-browser.js

@@ -113,7 +113,7 @@ export const onClientEntry = async () => {
         utm_medium: utm_data?.['utm_medium'],
         utm_campaign: utm_data?.['utm_campaign'],
         is_authorised: !!Cookies?.get('client_information'),
-        url: window.location.href
+        url: window.location.href,
     })
     //datadog
     const dd_options = {
@@ -155,28 +155,26 @@ export const onRouteUpdate = ({ location }) => {
 
     checkDomain()
 
-    Analytics?.getInstances()?.ab?.GrowthBook?.setURL(window.location.href)
-
     const dataLayer = window.dataLayer
     const domain = getDomain()
     const client_information = getClientInformation(domain)
     const is_logged_in = !!client_information
 
-    const path = location.pathname;
+    const path = location.pathname
 
     if (path === '/mn') {
-        navigate('/', { replace: true });
+        navigate('/', { replace: true })
     } else if (path.startsWith('/mn/')) {
-        const newPath = path.replace(/^\/mn/, '');
-        navigate(newPath || '/', { replace: true });
+        const newPath = path.replace(/^\/mn/, '')
+        navigate(newPath || '/', { replace: true })
     }
 
     if (path === '/km') {
-        navigate('/', { replace: true });
-      } else if (path.startsWith('/km/')) {
-        const newPath = path.replace(/^\/km/, '');
-        navigate(newPath || '/', { replace: true });
-      }
+        navigate('/', { replace: true })
+    } else if (path.startsWith('/km/')) {
+        const newPath = path.replace(/^\/km/, '')
+        navigate(newPath || '/', { replace: true })
+    }
 
     // wrap inside a timeout to ensure the title has properly been changed
     setTimeout(() => {

themes/gatsby-theme-deriv/src/common/websocket/index.ts

@@ -41,10 +41,12 @@ export class ApiManager {
     public init(lang?: string) {
         if (!this.ready) {
             if (!this.socket) {
+                // unsupported lang handler
                 const language = lang === 'ach' ? getCrowdin() : lang?.replace('-', '_')
+                const socket_lang = ['km'].includes(language) ? 'en' : language
                 const socket_url = getSocketURL()
                 const app_id = getAppId()
-                const websocket_connection_url = `${socket_url}?app_id=${app_id}&l=${language}&brand=${brand_name.toLowerCase()}`
+                const websocket_connection_url = `${socket_url}?app_id=${app_id}&l=${socket_lang}&brand=${brand_name.toLowerCase()}`
 
                 this.socket = new WebSocket(websocket_connection_url)
                 this.setReadyState(this.socket?.readyState)
@@ -99,9 +101,11 @@ export class ApiManager {
     }
 
     public reset(language: string) {
+        // unsupported lang handler
+        const socket_lang = ['km'].includes(language) ? 'en' : language
         const socket_url = getSocketURL()
         const app_id = getAppId()
-        const websocket_connection_url = `${socket_url}?app_id=${app_id}&l=${language}&brand=${brand_name.toLowerCase()}`
+        const websocket_connection_url = `${socket_url}?app_id=${app_id}&l=${socket_lang}&brand=${brand_name.toLowerCase()}`
 
         this.derivApi.disconnect()
         this.socket.close()

themes/gatsby-theme-deriv/src/components/custom/_signup-flat.tsx

@@ -137,7 +137,7 @@ const SignupFlat = ({
                     >
                         <Localize translate_text="_t_Join over 2.5 million traders worldwide_t_" />
                     </StyledHeader>
-                    <br />
+
                     <Text color={dark ? 'white' : 'black'}>
                         <Localize translate_text="_t_Sign up for your demo account now._t_" />
                     </Text>

themes/gatsby-theme-deriv/src/components/hooks/use-third-party-flags.tsx

@@ -1,35 +1,10 @@
-import { useState, useEffect } from 'react'
-import { initializeApp } from 'firebase/app'
-import { getDatabase, ref, onValue } from 'firebase/database'
-// import useRegion from 'components/hooks/use-region'
+import { useEffect, useState } from 'react'
 import featuresConfig from '../../../static/appConfig'
 
-const thirdPartyFlagsConfig = {
-    databaseURL: process.env.GATSBY_DATABASE_URL,
-}
-
 const useThirdPartyFlags = (featurePath) => {
-    const [data, setData] = useState(featuresConfig)
+    const [data] = useState(featuresConfig)
     const [feature, setFeature] = useState(null)
 
-    useEffect(() => {
-        const app = initializeApp(thirdPartyFlagsConfig, 'thirdPartyFlagsConfig')
-        const db = getDatabase(app)
-
-        // let fetchedData = featuresConfig
-        const starCountRef = ref(db, 'remote_config/deriv-com')
-        const flagsData = onValue(
-            starCountRef,
-            (snapshot) => {
-                setData(snapshot.val())
-            },
-            (error) => {
-                console.error(error)
-            },
-        )
-        return flagsData
-    }, [])
-
     useEffect(() => {
         const pathParts = featurePath.split('.')
         let currentFeature = data
@@ -52,5 +27,4 @@ const useThirdPartyFlags = (featurePath) => {
 
     return feature
 }
-
 export default useThirdPartyFlags

themes/gatsby-theme-deriv/src/components/hooks/useWS.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 import { TSocketEndpointNames, TSocketResponseData } from 'common/websocket/types'
 import apiManager, { ApiManager } from 'common/websocket'
-import { getLanguage, isBrowser } from 'common/utility'
+import { isBrowser } from 'common/utility'
 
 const useWS = <T extends TSocketEndpointNames>(name: T) => {
     const [is_loading, setIsLoading] = useState(false)
@@ -19,7 +19,7 @@ const useWS = <T extends TSocketEndpointNames>(name: T) => {
             const readyState = parseInt(ApiManager.readyState)
             if (readyState !== 1 && readyState !== 0) {
                 if (isBrowser()) {
-                    const currentLanguage = getLanguage() ?? 'en'
+                    const currentLanguage = 'en'
                     try {
                         // Connect to WebSocket if not connected
                         await apiManager.reconnectIfNotConnected(currentLanguage)

themes/gatsby-theme-deriv/src/features/components/templates/banners/deriv-products-hero/products-heading.tsx

@@ -21,7 +21,7 @@ const ProductsHeading = ({ title }: ProductsHeadingProps) => {
             >
                 {title.map((text, index) => (
                     <React.Fragment key={index}>
-                        <Localize translate_text={text} /> <br />
+                        <Localize translate_text={text} />
                     </React.Fragment>
                 ))}
             </Typography.Heading>

themes/gatsby-theme-deriv/src/features/components/templates/footer/index.tsx

@@ -1,79 +1,18 @@
-import React, { useEffect, useState } from 'react'
-import Cookies from 'js-cookie'
+import React, { useState } from 'react'
 import { Footer } from '@deriv-com/blocks'
 import { qtJoin } from '@deriv/quill-design'
-import {
-    EuFooterNavData,
-    RowFooterNavData,
-    socialButtonsCareers,
-    socialButtonsEU,
-    socialButtonsROW,
-    socialButtonsCPA,
-    specialLanguageUrls,
-    warnText,
-} from './data'
+import { EuFooterNavData, RowFooterNavData, socialButtonsROW, warnText } from './data'
 import { DerivGoBanner } from './deriv-go-banner'
 import { IIPAward } from './iip-award'
 import { DescriptionContent } from './description'
-import useThirdPartyFlags from 'components/hooks/use-third-party-flags'
-import { getLocationPathname } from 'common/utility'
 import useRegion from 'components/hooks/use-region'
 import useBuildVariant from 'features/hooks/use-build-variant'
-// import { socialIconROW, socialIconEU, socialIconCareer } from './validate-social-icons-data'
-
-const overrideWithLang = (buttons, lang) =>
-    buttons.map((button) =>
-        lang in specialLanguageUrls
-            ? button['aria-label'] in specialLanguageUrls[lang]
-                ? { ...button, href: specialLanguageUrls[lang][button['aria-label']] }
-                : button
-            : button,
-    )
 
 export const MainFooter = () => {
     const { region } = useBuildVariant()
-    const [is_career, setIsCareer] = useState(false)
     const { is_cpa_plan } = useRegion()
-    const [social_buttons, setSocialButtons] = useState(socialButtonsROW)
-    const [warn_text, setWarnText] = useState(warnText)
-    const lang = Cookies.get('user_language') || 'en'
-
-    useEffect(() => {
-        const current_path = getLocationPathname()
-        const splitted_path = current_path.split('/')
-        const is_career_page = splitted_path.includes('careers')
-        setIsCareer(is_career_page)
-    }, [])
-
-    const filterSocialIcons = (flagsData, mainData) => {
-        return mainData.filter((item) => flagsData?.[item['aria-label']])
-    }
-
-    const career_social_media_icons = useThirdPartyFlags('career_social_media_icons')
-    const row_social_media_icons = useThirdPartyFlags('row_social_media_icons')
-    const eu_social_media_icons = useThirdPartyFlags('eu_social_media_icons')
-    const cpa_social_media_icons = useThirdPartyFlags('cpa_social_media_icons')
-
-    useEffect(() => {
-        const socialIconROW = filterSocialIcons(row_social_media_icons, socialButtonsROW)
-        const socialIconEU = filterSocialIcons(eu_social_media_icons, socialButtonsEU)
-        const socialIconCareer = filterSocialIcons(career_social_media_icons, socialButtonsCareers)
-        const socialIconCPA = filterSocialIcons(cpa_social_media_icons, socialButtonsCPA)
-
-        const region_buttons = region === "eu" ? socialIconEU : is_cpa_plan ? socialIconCPA : socialIconROW
-        const buttons = is_career ? socialIconCareer : region_buttons
-        setSocialButtons(overrideWithLang(buttons, lang))
-        setWarnText(region !== "eu" && !is_cpa_plan ? warnText : null)
-    }, [
-        lang,
-        region,
-        is_cpa_plan,
-        is_career,
-        career_social_media_icons,
-        row_social_media_icons,
-        eu_social_media_icons,
-        cpa_social_media_icons,
-    ])
+    const [social_buttons] = useState(socialButtonsROW)
+    const [warn_text] = useState(warnText)
 
     return (
         <Footer.FooterBlock
@@ -82,9 +21,12 @@ export const MainFooter = () => {
             banner={DerivGoBanner}
             awards={IIPAward}
             descriptionContent={DescriptionContent}
-            className={qtJoin((region === "eu" || is_cpa_plan) && 'mb-[120px] lg:mb-[80px]')}
+            className={qtJoin((region === 'eu' || is_cpa_plan) && 'mb-[120px] lg:mb-[80px]')}
         >
-            <Footer.MainNavContent items={region === "eu" ? EuFooterNavData : RowFooterNavData} cols="six" />
+            <Footer.MainNavContent
+                items={region === 'eu' ? EuFooterNavData : RowFooterNavData}
+                cols="six"
+            />
         </Footer.FooterBlock>
     )
 }