Merge pull request #58 from farabi-deriv/farabi/bot-2204/app-separati…

…on-translation-fix

Farabi/bot-2204/app-separation-translation-fix

package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@deriv-com/analytics": "^1.5.3",
         "@deriv-com/api-hooks": "^1.6.5",
-        "@deriv-com/translations": "^1.2.4",
+        "@deriv-com/translations": "^1.3.9",
         "@deriv-com/ui": "^1.29.0",
         "@deriv-com/utils": "latest",
         "@deriv/deriv-charts": "^2.1.23",

src/components/bot-stopped.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import Text from '@/components/shared_ui/text';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
 import { LegacyClose1pxIcon } from '@deriv/quill-icons';
+import { Localize, localize } from '@deriv-com/translations';
 import Dialog from './shared_ui/dialog';
 
 const BotStopped = observer(() => {
@@ -24,7 +24,7 @@ const BotStopped = observer(() => {
         >
             <div className='dc-dialog__content__header'>
                 <Text data-testid='data-title' weight='bold' as='p' align='left' size='s' color='prominent'>
-                    {localize("You're back online")}
+                    <Localize i18n_default_text="You're back online" />
                 </Text>
                 <div
                     data-testid='data-close-button'
@@ -40,9 +40,7 @@ const BotStopped = observer(() => {
                 </div>
             </div>
             <Text as='p' align='left' size='xs' color='prominent'>
-                {localize(
-                    'The bot has stopped, but your trade may still be running. You can check it on the Reports page.'
-                )}
+                <Localize i18n_default_text='The bot has stopped, but your trade may still be running. You can check it on the Reports page.' />
             </Text>
         </Dialog>
     );

src/components/contract-result-overlay/contract-result-overlay.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import Text from '@/components/shared_ui/text';
-import { Localize } from '@/utils/tmp/dummy';
 import { LabelPairedCircleCheckMdRegularIcon, LabelPairedCircleXmarkMdRegularIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 
 type TContractResultOverlayProps = {
     profit: number;

src/components/flyout/flyout-block-group.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { Localize } from '@/utils/tmp/dummy';
 import { LabelPairedPlusLgFillIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import Button from '../shared_ui/button';
 import Text from '../shared_ui/text';
 import FlyoutBlock from './flyout-block';

src/components/journal/journal-components/format-message.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import { formatMoney, getCurrencyDisplayCode } from '@/components/shared';
 import Text from '@/components/shared_ui/text';
 import { LogTypes } from '@/external/bot-skeleton';
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { Localize, localize } from '@deriv-com/translations';
 import { TFormatMessageProps } from '../journal.types';
 
 const FormatMessage = ({ logType, className, extra }: TFormatMessageProps) => {

src/components/journal/journal-components/journal-tools.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import Download from '@/components/download';
 import Text from '@/components/shared_ui/text';
-import { Localize } from '@/utils/tmp/dummy';
 import { LabelPairedBarsFilterCaptionFillIcon } from '@deriv/quill-icons';
+import { Localize } from '@deriv-com/translations';
 import { TJournalToolsProps } from '../journal.types';
 import FilterDialog from './filter-dialog';
 

src/components/layout/footer/Endpoint.tsx

@@ -8,7 +8,7 @@ const Endpoint = () => {
 
     if (serverURL) {
         return (
-            <Text className='app-footer__endpoint' color='red' size='sm'>
+            <Text className='app-footer__endpoint' color='red' size='s'>
                 The server{' '}
                 <Link className='app-footer__endpoint-text' to={ENDPOINT}>
                     endpoint

src/components/layout/header/header.tsx

@@ -1,9 +1,11 @@
 import clsx from 'clsx';
+import Button from '@/components/shared_ui/button';
+import Text from '@/components/shared_ui/text';
 import useActiveAccount from '@/hooks/api/account/useActiveAccount';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
 import { Localize, useTranslations } from '@deriv-com/translations';
-import { Button, Header, Text, useDevice, Wrapper } from '@deriv-com/ui';
+import { Header, useDevice, Wrapper } from '@deriv-com/ui';
 import { Tooltip } from '@deriv-com/ui';
 import { URLUtils } from '@deriv-com/utils';
 import { AppLogo } from '../app-logo';
@@ -47,10 +49,10 @@ const AppHeader = () => {
                         onClick={() => {
                             window.location.assign('https://app.deriv.com/cashier/deposit');
                         }}
-                        size='md'
+                        size='s'
                         className='deposit-button'
                     >
-                        <Text size='sm' weight='bold'>
+                        <Text size='s' weight='bold'>
                             {localize('Deposit')}
                         </Text>
                     </Button>

src/components/load-modal/load-modal.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import { tabs_title } from '@/constants/load-modal';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import GoogleDrive from '../../pages/dashboard/load-bot-preview/google-drive';
 import MobileFullPageModal from '../shared_ui/mobile-full-page-modal';

src/components/load-modal/local-footer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import Button from '../shared_ui/button';
 

src/components/load-modal/recent-footer.tsx

@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite';
 import { NOTIFICATION_TYPE } from '@/components/bot-notification/bot-notification-utils';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import Button from '../shared_ui/button';
 
 const RecentFooter = observer(() => {

src/components/route-prompt-dialog/route-prompt-dialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { Localize, localize } from '@deriv-com/translations';
 import Dialog from '../shared_ui/dialog';
 
 const RoutePromptDialog = observer(() => {

src/components/shared/utils/constants/poi-failure-codes.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 
 type TIDVErrorStatus = Readonly<{
     [key: string]: {

src/components/shared/utils/contract/contract.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { Localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 import { unique } from '../object';
 import { isForwardStarting } from '../shortcode';
 import { capitalizeFirstLetter } from '../string/string_util';

src/components/shared/utils/helpers/chart-notifications.tsx

@@ -1,8 +1,8 @@
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 
 export const switch_to_tick_chart = {
     key: 'switch_to_tick_chart',
-    header: localize('This chart display is not ideal for tick contracts'),
+    header: <Localize i18n_default_text='This chart display is not ideal for tick contracts' />,
     message: <Localize i18n_default_text='Please change the chart duration to tick for a better trading experience.' />,
     type: 'info',
 };

src/components/shared/utils/helpers/portfolio-notifications.tsx

@@ -1,5 +1,6 @@
 import Money from '@/components/shared_ui/money';
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 
 export const contractSold = (currency: string, sold_for: number | string, Money: React.ElementType) => ({
     key: 'contract_sold',

src/components/shared_ui/contract-card/contract-card-items/contract-card-footer.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { hasContractEntered, isOpen, isValidToCancel, isValidToSell, useNewRowTransition } from '@/components/shared';
 import { TContractInfo } from '@/components/shared/src/utils/contract/contract-types';
-import { Localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 import Text from '../../text';
 import { TGetCardLables } from '../../types';
 import ContractCardSell from './contract-card-sell';

src/components/shared_ui/contract-card/contract-card-items/contract-update-form.tsx

@@ -10,7 +10,7 @@ import {
     pick,
 } from '@/components/shared';
 import { TContractInfo, TContractStore } from '@/components/shared/utils/contract/contract-types';
-import { Localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 import ArrowIndicator from '../../arrow-indicator';
 import Button from '../../button';
 import InputWithCheckbox from '../../input-wth-checkbox';

src/components/shared_ui/contract-card/contract-card-items/lookbacks-card-body.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CONTRACT_TYPES, getCardLabels, getDisplayStatus, isCryptocurrency } from '@/components/shared';
-import { Localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 import ArrowIndicator from '../../arrow-indicator';
 import MobileWrapper from '../../mobile-wrapper';
 import Money from '../../money';

src/components/trade-animation/contract-stage-text.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { contract_stages } from '@/constants/contract-stage';
-import { Localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 
 type TContractStageText = {
     contract_stage: number;

src/components/trading-view-chart/trading-view-modal.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite';
 import DraggableResizeWrapper from '@/components/draggable/draggable-resize-wrapper';
 import TradingViewComponent from '@/components/trading-view-chart/trading-view';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 const TradingViewModal = observer(() => {
     const { dashboard } = useStore();

src/pages/bot-builder/toolbar/workspace-group.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
 import {
     LabelPairedArrowRotateLeftMdRegularIcon,
     LabelPairedArrowRotateRightMdRegularIcon,
@@ -14,6 +13,7 @@ import {
     LabelPairedMagnifyingGlassPlusMdRegularIcon,
     LabelPairedObjectsAlignLeftMdRegularIcon,
 } from '@deriv/quill-icons';
+import { localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import ToolbarIcon from './toolbar-icon';
 

src/pages/chart/chart-modal/chart-modal-desktop.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import DraggableResizeWrapper from '@/components/draggable/draggable-resize-wrapper';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import Chart from '..';
 
 const ChartModalDesktop = observer(() => {

src/pages/dashboard/cards.tsx

@@ -7,15 +7,14 @@ import MobileFullPageModal from '@/components/shared_ui/mobile-full-page-modal';
 import Text from '@/components/shared_ui/text';
 import { DBOT_TABS } from '@/constants/bot-contents';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
 import {
     DerivLightBotBuilderIcon,
     DerivLightGoogleDriveIcon,
     DerivLightLocalDeviceIcon,
     DerivLightMyComputerIcon,
     DerivLightQuickStrategyIcon,
 } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
+import { Localize, localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import DashboardBotList from './load-bot-preview/dashboard-bot-list';
 import GoogleDrive from './load-bot-preview/google-drive';

src/pages/dashboard/load-bot-preview/dashboard-bot-list.tsx

@@ -3,28 +3,28 @@ import { observer } from 'mobx-react-lite';
 import Text from '@/components/shared_ui/text';
 import { getSavedWorkspaces } from '@/external/bot-skeleton';
 import { useStore } from '@/hooks/useStore';
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { Localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import DeleteDialog from './delete-dialog';
 import RecentWorkspace from './recent-workspace';
 import './index.scss';
 
 type THeader = {
-    label: string;
+    label: React.ReactElement;
     className: string;
 };
 
 const HEADERS: THeader[] = [
     {
-        label: localize('Bot name'),
+        label: <Localize i18n_default_text='Bot name' />,
         className: 'bot-list__header__label',
     },
     {
-        label: localize('Last modified'),
+        label: <Localize i18n_default_text='Last modified' />,
         className: 'bot-list__header__time-stamp',
     },
     {
-        label: localize('Status'),
+        label: <Localize i18n_default_text='Status' />,
         className: 'bot-list__header__load-type',
     },
 ];

src/pages/dashboard/load-bot-preview/icon-radio.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import Text from '@/components/shared_ui/text';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 
 type TIconRadio = {
     google_drive_connected?: boolean;

src/pages/dashboard/load-bot-preview/local-footer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import Button from '@/components/shared_ui/button';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
+import { localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import './index.scss';
 

src/pages/dashboard/load-bot-preview/local.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import Dialog from '@/components/shared_ui/dialog';
 import { DBOT_TABS } from '@/constants/bot-contents';
 import { useStore } from '@/hooks/useStore';
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { Localize, localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import BotPreview from './bot-preview';
 import './index.scss';

src/pages/dashboard/load-bot-preview/save-modal.tsx

@@ -11,8 +11,8 @@ import Text from '@/components/shared_ui/text';
 import ThemedScrollbars from '@/components/shared_ui/themed-scrollbars';
 import { config, save_types } from '@/external/bot-skeleton';
 import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
 import { DerivLightGoogleDriveIcon, DerivLightLocalDeviceIcon, DerivLightMyComputerIcon } from '@deriv/quill-icons';
+import { localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import IconRadio from './icon-radio';
 

src/pages/dashboard/stop-bot-modal-content.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Dialog from '@/components/shared_ui/dialog';
 import Text from '@/components/shared_ui/text';
-import { Localize, localize } from '@/utils/tmp/dummy';
+import { Localize, localize } from '@deriv-com/translations';
 
 export type TStopBotModalContent = {
     is_running: boolean;
@@ -50,7 +50,7 @@ const StopBotModalContent = ({
                             <Text weight='bold' as='span' lineHeight='s' size='xs'>
                                 <Localize i18n_default_text='Reports' />
                             </Text>
-                            <Localize i18n_default_text='page.' />
+                            <Localize i18n_default_text=' page.' />
                         </Text>
                         <Text as='p' lineHeight='s' size='xs'>
                             <Localize i18n_default_text='The Quick Strategy you just created will be loaded to the workspace.' />
@@ -67,7 +67,7 @@ const StopBotModalContent = ({
                                 <Localize i18n_default_text='Reports' />
                             </Text>
                             <Text as='span' lineHeight='s' size='xs' styles={{ paddingInlineStart: '0.4rem' }}>
-                                <Localize i18n_default_text='page.' />
+                                <Localize i18n_default_text=' page.' />
                             </Text>
                         </Text>
                     </>

src/pages/main/main.tsx

@@ -12,13 +12,13 @@ import dbot from '@/external/bot-skeleton/scratch/dbot';
 import { api_base } from '@/external/bot-skeleton/services/api/api-base';
 import { isDbotRTL } from '@/external/bot-skeleton/utils/workspace';
 import { useStore } from '@/hooks/useStore';
-import { Localize, localize } from '@/utils/tmp/dummy';
 import {
     LabelPairedChartLineCaptionRegularIcon,
     LabelPairedObjectsColumnCaptionRegularIcon,
     LabelPairedPuzzlePieceTwoCaptionBoldIcon,
     LegacyGuide1pxIcon,
 } from '@deriv/quill-icons';
+import { Localize, localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import RunPanel from '../../components/run-panel';
 import Chart from '../chart';