feat: implement translation

__mocks__/LocalizeMock.js

@@ -1,5 +1,13 @@
-const Localize = ({ i18n_default_text }) => {
-    return i18n_default_text || null;
+const Localize = ({ i18n_default_text, values }) => {
+    // Replace placeholders in the default text with actual values
+    const localizedText = i18n_default_text.replace(/\{\{(\w+)\}\}/g, (match, key) => values[key] || match);
+
+    return localizedText || null;
 };
 
-export { Localize };
+// Mock for useTranslations hook
+const useTranslations = () => ({
+    localize: jest.fn(text => text),
+});
+
+export { Localize, useTranslations };

src/components/AdvertiserName/AdvertiserNameStats.tsx

@@ -46,7 +46,11 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                     </div>
                 )}
                 <Text color='less-prominent' size='sm'>
-                    Joined {daysSinceJoined && daysSinceJoined > 0 ? `${daysSinceJoined}d` : 'Today'}
+                    {daysSinceJoined && daysSinceJoined > 0 ? (
+                        <Localize i18n_default_text='Joined {{daysSinceJoined}}d' values={{ daysSinceJoined }} />
+                    ) : (
+                        <Localize i18n_default_text='Joined Today' />
+                    )}
                 </Text>
             </div>
             {!ratingAverage && (
@@ -67,7 +71,7 @@ const AdvertiserNameStats = ({ advertiserStats }: { advertiserStats: DeepPartial
                             )}
                             <StarRating allowFraction isReadonly ratingValue={ratingAverage} />
                             <Text color='less-prominent' size='sm'>
-                                ({ratingCount} ratings)
+                                (<Localize i18n_default_text='{{ratingCount}} ratings' values={{ ratingCount }} />)
                             </Text>
                         </div>
                     </div>

src/components/AdvertiserName/AdvertiserNameToggle.tsx

@@ -1,6 +1,7 @@
 import { memo, useEffect, useState } from 'react';
 import { DeepPartial, TAdvertiserStats } from 'types';
 import { api } from '@/hooks';
+import { Localize } from '@deriv-com/translations';
 import { Text, ToggleSwitch } from '@deriv-com/ui';
 import './AdvertiserNameToggle.scss';
 
@@ -28,7 +29,7 @@ const AdvertiserNameToggle = memo(({ advertiserInfo, onToggle }: TAdvertiserName
         <div className='advertiser-name-toggle'>
             <div className='advertiser-name-toggle__label'>
                 <Text lineHeight='lg' size='sm'>
-                    Show my real name
+                    <Localize i18n_default_text='Show my real name' />
                 </Text>
                 <Text className='advertiser-name-toggle__label-real-name' color='less-prominent' lineHeight='xs'>
                     {advertiserInfo?.fullName}

src/components/AdvertsTableRow/AdvertsTableRow.tsx

@@ -136,7 +136,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
                 <Container {...(isMobile && { className: clsx('flex flex-col', { 'mt-3 ml-14': isBuySellPage }) })}>
                     {isMobile && (
                         <Text color={isBuySellPage ? 'general' : 'less-prominent'} size={isBuySellPage ? 'xs' : 'sm'}>
-                            Rate (1 USD)
+                            <Localize i18n_default_text='Rate (1 USD)' />
                         </Text>
                     )}
                     <Container {...(isMobile && { className: 'flex flex-col-reverse mb-7' })}>

src/components/AppHeader/AppHeader.tsx

@@ -5,6 +5,7 @@ import {
     LegacyMenuHamburger1pxIcon,
 } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Button, DerivLogo, Drawer, Header, MenuItem, Text, useDevice, Wrapper } from '@deriv-com/ui';
 import { LocalStorageConstants, LocalStorageUtils, URLUtils } from '@deriv-com/utils';
 import './AppHeader.scss';
@@ -37,7 +38,9 @@ const AppHeader = () => {
                         className='flex gap-2 p-5'
                         leftComponent={<LabelPairedHouseBlankMdRegularIcon />}
                     >
-                        <Text>Trader&apos;s Hub</Text>
+                        <Text>
+                            <Localize i18n_default_text={`Trader's Hub`} />
+                        </Text>
                     </MenuItem>
                 </Wrapper>
             ) : (
@@ -54,7 +57,9 @@ const AppHeader = () => {
                                 setIsDrawerOpen(false);
                             }}
                         >
-                            <Text>Menu</Text>
+                            <Text>
+                                <Localize i18n_default_text='Menu' />
+                            </Text>
                         </Drawer.Header>
                         <Drawer.Content>
                             <div className='flex'>
@@ -64,7 +69,9 @@ const AppHeader = () => {
                                     leftComponent={<LabelPairedHouseBlankMdRegularIcon />}
                                     rightComponent={<LegacyChevronRight2pxIcon iconSize='xs' />}
                                 >
-                                    <Text>Trader&apos;s Hub</Text>
+                                    <Text>
+                                        <Localize i18n_default_text={`Trader's Hub`} />
+                                    </Text>
                                 </MenuItem>
                             </div>
                         </Drawer.Content>
@@ -77,15 +84,19 @@ const AppHeader = () => {
                 </Wrapper>
             )}
             {activeLoginid ? (
-                <Button onClick={logout}>Logout</Button>
+                <Button onClick={logout}>
+                    <Localize i18n_default_text='Logout' />
+                </Button>
             ) : (
                 <Button
                     className='w-36'
                     color='primary-light'
                     onClick={() => window.open(oauthUrl, '_self')}
                     variant='ghost'
                 >
-                    <Text weight='bold'>Log in</Text>
+                    <Text weight='bold'>
+                        <Localize i18n_default_text='Log in' />
+                    </Text>
                 </Button>
             )}
         </Header>

src/components/Clipboard/Clipboard.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'usehooks-ts';
 import { LegacyCopy1pxIcon, LegacyWonIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
 import { Tooltip } from '@deriv-com/ui';
 import './Clipboard.scss';
 
@@ -13,6 +14,7 @@ const Clipboard = ({ textCopy }: TClipboardProps) => {
     const timeoutClipboardRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const [, copy] = useCopyToClipboard();
     const [isCopied, setIsCopied] = useState(false);
+    const { localize } = useTranslations();
 
     const onClick = (event: { stopPropagation: () => void }) => {
         setIsCopied(true);
@@ -32,7 +34,7 @@ const Clipboard = ({ textCopy }: TClipboardProps) => {
     }, []);
 
     return (
-        <Tooltip message={isCopied ? 'Copied!' : 'Copy'} position='top'>
+        <Tooltip message={isCopied ? localize('Copied!') : localize('Copy')} position='top'>
             <button className='clipboard' onClick={onClick}>
                 {isCopied ? <LegacyWonIcon iconSize='xs' /> : <LegacyCopy1pxIcon iconSize='xs' />}
             </button>

src/components/FileUploaderComponent/FileUploaderComponent.tsx

@@ -1,6 +1,7 @@
 import { memo, useCallback } from 'react';
 import { DropEvent, FileRejection } from 'react-dropzone';
 import { DerivLightIcCloudUploadIcon, StandaloneCircleXmarkBoldIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
 import { Text } from '@deriv-com/ui';
 import { FileDropzone } from '../FileDropzone';
 import './FileUploaderComponent.scss';
@@ -30,6 +31,7 @@ const FileUploaderComponent = ({
     validationErrorMessage,
     value,
 }: TFileUploaderComponentProps) => {
+    const { localize } = useTranslations();
     const getUploadMessage = useCallback(() => {
         return (
             <>
@@ -45,7 +47,7 @@ const FileUploaderComponent = ({
         <div className='file-uploader-component'>
             <FileDropzone
                 accept={accept}
-                errorMessage='Please upload supported file type.'
+                errorMessage={localize('Please upload supported file type.')}
                 filenameLimit={26}
                 hoverMessage={hoverMessage}
                 maxSize={maxSize}

src/components/FloatingRate/FloatingRate.tsx

@@ -3,6 +3,7 @@ import { TCurrency, TExchangeRate } from 'types';
 import { api } from '@/hooks';
 import { mobileOSDetect, percentOf, removeTrailingZeros, roundOffDecimal, setDecimalPlaces } from '@/utils';
 import { useExchangeRates } from '@deriv-com/api-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
 import InputField from '../InputField';
@@ -70,7 +71,7 @@ const FloatingRate = ({
         <div className='floating-rate'>
             <div className='floating-rate__field'>
                 <Text as='div' className='floating-rate__field--prefix' size={isMobile ? 'lg' : 'md'}>
-                    at
+                    <Localize i18n_default_text='at' />
                 </Text>
                 <InputField
                     decimalPointChange={2}
@@ -83,7 +84,7 @@ const FloatingRate = ({
                 />
                 <div className='floating-rate__mkt-rate'>
                     <Text className='floating-rate__mkt-rate--label' size={textSize}>
-                        of the market rate
+                        <Localize i18n_default_text='of the market rate' />
                     </Text>
                     <Text className='floating-rate__mkt-rate--msg' color='prominent' size={textSize}>
                         1 {fiatCurrency} ={' '}
@@ -102,7 +103,7 @@ const FloatingRate = ({
                 </Text>
             ) : (
                 <Text as='div' className='floating-rate__hint' color='blue' size={textSize}>
-                    Your rate is ={' '}
+                    <Localize i18n_default_text='Your rate is = ' />
                     {removeTrailingZeros(
                         FormatUtils.formatMoney(Number(roundOffDecimal(marketFeed, decimalPlace)), {
                             currency: localCurrency,

src/components/Modals/AdCancelCreateEditModal/AdCancelCreateEditModal.tsx

@@ -1,6 +1,7 @@
 import { useHistory } from 'react-router-dom';
 import { MY_ADS_URL } from '@/constants';
 import { useQueryString } from '@/hooks/custom-hooks';
+import { Localize } from '@deriv-com/translations';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './AdCancelCreateEditModal.scss';
 
@@ -24,13 +25,23 @@ const AdCancelCreateEditModal = ({ isModalOpen, onRequestClose }: TAdCancelCreat
             shouldCloseOnOverlayClick={false}
         >
             <Modal.Header className='ad-cancel-create-edit-modal__header' hideBorder hideCloseIcon>
-                <Text weight='bold'>{isEdit ? 'Cancel your edits?' : 'Cancel ad creation?'}</Text>
+                <Text weight='bold'>
+                    {isEdit ? (
+                        <Localize i18n_default_text='Cancel your edits?' />
+                    ) : (
+                        <Localize i18n_default_text='Cancel ad creation?' />
+                    )}
+                </Text>
             </Modal.Header>
             <Modal.Body className='ad-cancel-create-edit-modal__body'>
                 <Text size='sm'>
-                    {isEdit
-                        ? `If you choose to cancel, the edited details will be lost.`
-                        : `If you choose to cancel, the details you've entered will be lost.`}
+                    {isEdit ? (
+                        <Localize i18n_default_text='If you choose to cancel, the edited details will be lost.' />
+                    ) : (
+                        <Localize
+                            i18n_default_text={`If you choose to cancel, the details you've entered will be lost.`}
+                        />
+                    )}
                 </Text>
             </Modal.Body>
             <Modal.Footer className='ad-cancel-create-edit-modal__footer' hideBorder>
@@ -42,10 +53,10 @@ const AdCancelCreateEditModal = ({ isModalOpen, onRequestClose }: TAdCancelCreat
                     textSize={textSize}
                     variant='outlined'
                 >
-                    Cancel
+                    <Localize i18n_default_text='Cancel' />
                 </Button>
                 <Button onClick={onRequestClose} size='lg' textSize={textSize}>
-                    Don’t cancel
+                    <Localize i18n_default_text='Don’t cancel' />
                 </Button>
             </Modal.Footer>
         </Modal>

src/components/Modals/AdConditionsModal/AdConditionsModal.tsx

@@ -1,4 +1,5 @@
 import { AD_CONDITION_CONTENT } from '@/constants';
+import { Localize } from '@deriv-com/translations';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './AdConditionsModal.scss';
 
@@ -22,7 +23,7 @@ const AdConditionsModal = ({ isModalOpen, onRequestClose, type }: TAdConditionsM
             </Modal.Body>
             <Modal.Footer hideBorder>
                 <Button onClick={onRequestClose} size='lg' textSize={isMobile ? 'md' : 'sm'} variant='contained'>
-                    OK
+                    <Localize i18n_default_text='OK' />
                 </Button>
             </Modal.Footer>
         </Modal>

src/components/Modals/AdCreateEditErrorModal/AdCreateEditErrorModal.tsx

@@ -1,5 +1,6 @@
 import { TErrorCodes } from 'types';
 import { ERROR_CODES } from '@/constants';
+import { Localize } from '@deriv-com/translations';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './AdCreateEditErrorModal.scss';
 
@@ -41,14 +42,22 @@ const AdCreateEditErrorModal = ({
             onRequestClose={onRequestClose}
         >
             <Modal.Header className='ad-create-edit-error-modal__header' hideBorder hideCloseIcon>
-                <Text weight='bold'>{(errorCode && errorContent?.[errorCode]?.title) ?? 'Something’s not right'}</Text>
+                <Text weight='bold'>
+                    {(errorCode && errorContent?.[errorCode]?.title) ?? (
+                        <Localize i18n_default_text='Something’s not right' />
+                    )}
+                </Text>
             </Modal.Header>
             <Modal.Body className='ad-create-edit-error-modal__body'>
                 <Text size={textSize}>{errorMessage}</Text>
             </Modal.Body>
             <Modal.Footer className='ad-create-edit-error-modal__footer' hideBorder>
                 <Button onClick={onRequestClose} size='lg' textSize={textSize}>
-                    {errorCode && errorContent?.[errorCode]?.title ? 'Update ad' : 'Ok'}
+                    {errorCode && errorContent?.[errorCode]?.title ? (
+                        <Localize i18n_default_text='Update ad' />
+                    ) : (
+                        <Localize i18n_default_text='OK' />
+                    )}
                 </Button>
             </Modal.Footer>
         </Modal>

src/components/Modals/AdCreateEditSuccessModal/AdCreateEditSuccessModal.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { TCurrency } from 'types';
 import { MY_ADS_URL } from '@/constants';
+import { Localize } from '@deriv-com/translations';
 import { Button, Checkbox, Modal, Text, useDevice } from '@deriv-com/ui';
 import './AdCreateEditSuccessModal.scss';
 
@@ -52,22 +53,27 @@ const AdCreateEditSuccessModal = ({
             onRequestClose={onRequestClose}
         >
             <Modal.Header hideBorder hideCloseIcon>
-                <Text weight='bold'>You’ve created an ad</Text>
+                <Text weight='bold'>
+                    <Localize i18n_default_text='You’ve created an ad' />
+                </Text>
             </Modal.Header>
             <Modal.Body className='ad-create-edit-success-modal__body'>
                 <Text color='prominent' size={textSize}>
-                    {`If the ad doesn't receive an order for ${advertsArchivePeriod} days, it will be deactivated.`}
+                    <Localize
+                        i18n_default_text={`If the ad doesn't receive an order for {{advertsArchivePeriod}} days, it will be deactivated.`}
+                        values={{ advertsArchivePeriod }}
+                    />
                 </Text>
                 <Checkbox
                     checked={isChecked}
-                    label='Don’t show this message again.'
+                    label={<Localize i18n_default_text='Don’t show this message again' />}
                     name='ad-create-success-message'
                     onChange={onToggleCheckbox}
                 />
             </Modal.Body>
             <Modal.Footer hideBorder>
                 <Button onClick={onClickOk} size='lg' textSize={textSize}>
-                    Ok
+                    <Localize i18n_default_text='Ok' />
                 </Button>
             </Modal.Footer>
         </Modal>