chore: language switcher spike

docusaurus.config.js

@@ -27,7 +27,12 @@ const config = {
   // to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'en',
-    locales: ['en'],
+    locales: ['en', 'es', 'fr'],
+    localeConfigs: {
+      th: {
+        label: 'Thai',
+      },
+    },
   },
 
   plugins: [
@@ -118,6 +123,10 @@ const config = {
             type: 'custom-user-navbar-item',
             position: 'right',
           },
+          {
+            type: 'localeDropdown',
+            position: 'right',
+          },
         ],
       },
       prism: {

src/components/Footer/index.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './Footer.module.scss';
+import Translate from '@docusaurus/Translate';
 
 const Footer = () => {
   return (
     <footer className={styles.FooterContainer} data-testid='footer-text'>
       <section className={styles.FooterBody}>
         <Text type='subtitle-1' as='h3' align='center' className={styles.FooterContent}>
-          Get connected
+          <Translate>Get connected</Translate>
         </Text>
         <p className={styles.FooterBodyContent}>
-          Discuss ideas and share solutions with developers worldwide.
+          <Translate>Discuss ideas and share solutions with developers worldwide.</Translate>
         </p>
         <div className={styles.Communities}>
           <a
@@ -19,22 +20,24 @@ const Footer = () => {
             rel='noreferrer'
             className={styles.communityButton}
           >
-            <span>Join our community</span>
+            <span>
+              <Translate>Join our community</Translate>
+            </span>
           </a>
         </div>
       </section>
       <section className={styles.FooterBody}>
         <Text type='subtitle-1' as='h3' align='center' className={styles.FooterContent}>
-          We&apos;re here to help
+          <Translate>We&apos;re here to help</Translate>
         </Text>
         <Text type='paragraph-1' align='center' className={styles.FooterBodyContentEmail}>
-          Email us at{' '}
+          <Translate>Email us at</Translate>{' '}
           <a className={styles.Email} href={'mailto:api-support@deriv.com'}>
-            api-support@deriv.com
+            <Translate>api-support@deriv.com</Translate>
           </a>
         </Text>
         <Text type='paragraph-1' align='center' className={styles.FooterBodyContentEmail}>
-          if you have any questions.
+          <Translate>if you have any questions.</Translate>
         </Text>
       </section>
     </footer>

src/features/Apiexplorer/Dropdown/DropdownList/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { playground_requests } from '@site/src/utils/playground_requests';
 import clsx from 'clsx';
 import styles from './DropdownList.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TDropdownList = {
   selected: string;
@@ -34,10 +35,14 @@ const DropdownList = ({
       />
       <div className={styles.dropdownList}>
         <div className={styles.dropdownSelect}>
-          <span>Select API Call - Version 3</span>
+          <span>
+            <Translate>Select API Call - Version 3</Translate>
+          </span>
         </div>
         <div className={styles.dropdownStart}>
-          <span>ALL CALLS</span>
+          <span>
+            <Translate>ALL CALLS</Translate>
+          </span>
         </div>
         {playground_requests
           .filter((option) => {

src/features/Apiexplorer/LoginDialog/index.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { Modal, Button } from '@deriv/ui';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import styles from './LoginDialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TLoginDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -36,21 +37,25 @@ export const LoginDialog = ({ setToggleModal }: TLoginDialog) => {
           >
             <div className={styles.modal}>
               <p>
-                This API call must be authorised because it requires access to your account
-                information.
+                <Translate>
+                  This API call must be authorised because it requires access to your account
+                  information.
+                </Translate>
               </p>
               <p>
-                Log in to your Deriv account to proceed. If you don’t have a Deriv account, sign up
-                first.
+                <Translate>
+                  Log in to your Deriv account to proceed. If you don’t have a Deriv account, sign
+                  up first.
+                </Translate>
               </p>
             </div>
 
             <div className={styles.buttonWrapper}>
               <Button color='tertiary' onClick={handleSignUp} className={styles.btn}>
-                Sign up
+                <Translate>Sign up</Translate>
               </Button>
               <Button color='primary' onClick={handleClick} className={styles.btn}>
-                Log in
+                <Translate>Log in</Translate>
               </Button>
             </div>
           </Modal.PageContent>

src/features/Apiexplorer/RequestJSONBox/index.tsx

@@ -1,10 +1,11 @@
 import { TSocketEndpointNames } from '@site/src/configs/websocket/types';
 import clsx from 'clsx';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import RequestResponseRenderer from '../RequestResponseRenderer';
 import style from './RequestJSONBox.module.scss';
 import SubscribeRenderer from '../SubscribeRenderer';
 import { TSocketSubscribableEndpointNames } from '@site/src/configs/websocket/types';
+import Translate from '@docusaurus/Translate';
 
 interface TRequestJSONBox<T extends TSocketEndpointNames> {
   handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
@@ -27,7 +28,7 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
     <div className={style.playgroundBox}>
       <div className={style.formContent}>
         <label htmlFor='playground-request' className={style.inlineLabel}>
-          Request JSON
+          <Translate>Request JSON</Translate>
         </label>
         <textarea
           id='playground-request'

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import {
   TSocketSubscribableEndpointNames,
   TSocketRequestProps,
@@ -11,6 +11,7 @@ import useDisableSendRequest from '@site/src/hooks/useDisableSendRequest';
 import PlaygroundSection from '../RequestResponseRenderer/PlaygroundSection';
 import LoginDialog from '../LoginDialog';
 import ValidDialog from '../ValidDialog';
+import Translate from '@docusaurus/Translate';
 
 export interface IResponseRendererProps<T extends TSocketSubscribableEndpointNames> {
   name: T;
@@ -84,10 +85,10 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
           disabled={disableSendRequest(auth) || reqData === ''}
           onClick={handleClick}
         >
-          Send Request
+          <Translate>Send Request</Translate>
         </Button>
         <Button color='secondary' disabled={reqData === ''} onClick={handleClear}>
-          Clear
+          <Translate>Clear</Translate>
         </Button>
       </div>
       {is_not_valid && (

src/features/Apiexplorer/ValidDialog/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Modal } from '@deriv/ui';
 import styles from '../LoginDialog/LoginDialog.module.scss';
+import Translate from '@docusaurus/Translate';
 
 type TValidDialog = {
   setIsNotValid: React.Dispatch<React.SetStateAction<boolean>>;
@@ -28,8 +29,10 @@ export const ValidDialog = ({ setIsNotValid, setToggleModal }: TValidDialog) =>
             className={styles.validwrapper}
           >
             <div className={styles.validmodal}>
-              Your JSON object is invalid. Please make sure you provide the correct syntax for your
-              JSON object.
+              <Translate>
+                Your JSON object is invalid. Please make sure you provide the correct syntax for
+                your JSON object.
+              </Translate>
             </div>
           </Modal.PageContent>
         </div>

src/features/Auth/Login/Login.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import styles from './Login.module.scss';
 import useLoginUrl from '@site/src/hooks/useLoginUrl';
 import Footer from '@site/src/components/Footer';
+import Translate from '@docusaurus/Translate';
 
 export const Login = () => {
   const { getUrl } = useLoginUrl();
@@ -16,10 +17,12 @@ export const Login = () => {
         <div className={styles.loginsection}>
           <div className={styles.loginImage} role='image' />
           <Text type='paragraph-1' as={'h1'} align='center' bold role='heading'>
-            Log in to your Deriv account to get the API token and start using our API.
+            <Translate>
+              Log in to your Deriv account to get the API token and start using our API.
+            </Translate>
           </Text>
           <Button color='primary' onClick={handleClick}>
-            Log In
+            <Translate>Log In</Translate>
           </Button>
         </div>
         <div className={styles.footer}>

src/features/Endpoint/Endpoint.tsx

@@ -4,6 +4,7 @@ import { Button, Text } from '@deriv/ui';
 import { getAppId } from '@site/src/utils';
 import { DEFAULT_WS_SERVER } from '@site/src/utils/constants';
 import styles from './Endpoint.module.scss';
+import Translate, { translate } from '@docusaurus/Translate';
 
 interface IEndpointFormValues {
   app_id: string;
@@ -50,7 +51,7 @@ const EndPoint = () => {
       <form onSubmit={handleSubmit(onSubmit)} aria-label='form'>
         <div className={styles.pageContent}>
           <Text type='heading-2' as={'h2'} align='center' bold role='heading'>
-            Change API endpoint
+            <Translate>Change API endpoint</Translate>
           </Text>
           <div className={styles.content}>
             <div className={styles.customTextInput} id='custom-text-input'>
@@ -59,19 +60,21 @@ const EndPoint = () => {
                   {...register('server_url', {
                     required: {
                       value: true,
-                      message: 'Server is Required',
+                      message: translate({ message: 'Server is Required' }),
                     },
                     pattern: {
                       value: /^([\w-]+\.)+[\w-]+(`[\w- ;,./?%&=])*?$/, // TODO: it's better to check if the server url contains qa or not ( for qa box server urls )
-                      message: 'Please enter a valid server URL',
+                      message: translate({ message: 'Please enter a valid server URL' }),
                     },
                   })}
                   name='server_url'
                   placeholder='e.g. ws.derivws.com'
                   className={styles.textInput}
                   required
                 />
-                <label className={styles.inlineLabel}>Server URL</label>
+                <label className={styles.inlineLabel}>
+                  <Translate>Server URL</Translate>
+                </label>
                 {errors.server_url && (
                   <div data-testid='server_error' className={styles.errorMessage}>
                     {errors.server_url.message}
@@ -83,19 +86,21 @@ const EndPoint = () => {
                   {...register('app_id', {
                     required: {
                       value: true,
-                      message: 'App ID is required',
+                      message: translate({ message: 'App ID is required' }),
                     },
                     pattern: {
                       value: /^(0|[1-9]\d*)(\.\d+)?$/,
-                      message: 'Please enter a valid app ID',
+                      message: translate({ message: 'Please enter a valid app ID' }),
                     },
                   })}
                   name='app_id'
                   className={styles.textInput}
                   placeholder='e.g. 9999'
                   required
                 />
-                <label className={styles.inlineLabel}>App ID</label>
+                <label className={styles.inlineLabel}>
+                  <Translate>App ID</Translate>
+                </label>
                 {errors.app_id && (
                   <div data-testid='app_id_error' className={styles.errorMessage}>
                     {errors.app_id.message}
@@ -104,12 +109,14 @@ const EndPoint = () => {
               </div>
             </div>
             <div className={styles.currentUrl}>
-              <span className={styles.urlLabel}>Connected to :</span>
+              <span className={styles.urlLabel}>
+                <Translate>Connected to :</Translate>
+              </span>
               <div className={styles.urlLink}>{current_url}</div>
             </div>
             <div className={styles.buttons}>
               <Button type='submit' color='primary' disabled={Object.keys(errors).length > 0}>
-                Submit
+                <Translate>Submit</Translate>
               </Button>
               <span style={{ marginLeft: '1.6rem' }} />
               <Button
@@ -118,7 +125,7 @@ const EndPoint = () => {
                 onClick={onResetClicked}
                 className={styles.resetButton}
               >
-                Reset to original settings
+                <Translate>Reset to original settings</Translate>
               </Button>
             </div>
           </div>

src/features/Home/ApiFeatures/ApiFeatures.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import { Text } from '@deriv/ui';
 import styles from './ApiFeatures.module.scss';
+import Translate from '@docusaurus/Translate';
+
 export const ApiFeatures = () => {
   return (
     <article className={styles.FeaturesContainer} data-testid='api-features'>
       <section className={styles.FeatureText}>
         <header>
           <Text type='heading-2' as={'h2'} bold aria-level={1}>
-            Deriv API features
+            <Translate>Deriv API features</Translate>
           </Text>
           <Text type='paragraph-1' className={styles.FeatureParagraph} role='definition'>
-            Deriv API gives you full access to all the trading functionalities of DTrader and allows
-            you to build your own comprehensive trading systems and analysis tools.
+            <Translate>
+              Deriv API gives you full access to all the trading functionalities of DTrader and
+              allows you to build your own comprehensive trading systems and analysis tools.
+            </Translate>
           </Text>
           <Text type='paragraph-1' className={styles.FeatureParagraph} role={'note'}>
             {"With our API, you'll be able to:"}
@@ -21,27 +25,39 @@ export const ApiFeatures = () => {
           <ul className={styles.FeatureList}>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Trade digital options and multipliers</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Trade digital options and multipliers</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Monitor real-time pricing</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Monitor real-time pricing</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Buy/sell contracts</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Buy/sell contracts</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>{"Manage user's accounts"}</div>
+              <div className={styles.FeatureContent}>
+                <Translate>{"Manage user's accounts"}</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>Monitor existing contracts</div>
+              <div className={styles.FeatureContent}>
+                <Translate>Monitor existing contracts</Translate>
+              </div>
             </li>
             <li className={styles.FeatureOptions}>
               <img src='/img/checklist-icon-grey.svg'></img>
-              <div className={styles.FeatureContent}>{"View user's historical transactions"}</div>
+              <div className={styles.FeatureContent}>
+                <Translate>{"View user's historical transactions"}</Translate>
+              </div>
             </li>
           </ul>
         </section>