Nada/localize mock fix (#72)

* fix: localize mock fixed

* fix: localize import changed to function params

* fix: failing test

__mocks__/LocalizeMock.js

@@ -10,4 +10,6 @@ const useTranslations = () => ({
     localize: jest.fn(text => text),
 });
 
-export { Localize, useTranslations };
+const localize = jest.fn(text => text);
+
+export { Localize, localize, useTranslations };

src/components/Modals/AdConditionsModal/AdConditionsModal.tsx

@@ -1,5 +1,5 @@
-import { AD_CONDITION_CONTENT } from '@/constants';
-import { Localize } from '@deriv-com/translations';
+import { getAdConditionContent } from '@/constants';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './AdConditionsModal.scss';
 
@@ -11,14 +11,15 @@ type TAdConditionsModalProps = {
 
 const AdConditionsModal = ({ isModalOpen, onRequestClose, type }: TAdConditionsModalProps) => {
     const { isMobile } = useDevice();
+    const { localize } = useTranslations();
     return (
         <Modal ariaHideApp={false} className='ad-conditions-modal' isOpen={isModalOpen} onRequestClose={onRequestClose}>
             <Modal.Header className='px-[1.6rem]' hideBorder hideCloseIcon onRequestClose={onRequestClose}>
-                <Text weight='bold'>{AD_CONDITION_CONTENT[type].title}</Text>
+                <Text weight='bold'>{getAdConditionContent(localize)[type].title}</Text>
             </Modal.Header>
             <Modal.Body className='p-[1.6rem] lg:p-[2.4rem]'>
                 <Text className='whitespace-pre-line' size='sm'>
-                    {AD_CONDITION_CONTENT[type].description}
+                    {getAdConditionContent(localize)[type].description}
                 </Text>
             </Modal.Body>
             <Modal.Footer hideBorder>

src/components/Modals/OrderTimeTooltipModal/OrderTimeTooltipModal.tsx

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
-import { ORDER_TIME_INFO_MESSAGE } from '@/constants';
-import { Localize } from '@deriv-com/translations';
+import { getOrderTimeInfoMessage } from '@/constants';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Modal, Text } from '@deriv-com/ui';
 
 type TOrderTimeTooltipModalProps = {
@@ -9,11 +9,12 @@ type TOrderTimeTooltipModalProps = {
 };
 
 const OrderTimeTooltipModal = ({ isModalOpen, onRequestClose }: TOrderTimeTooltipModalProps) => {
+    const { localize } = useTranslations();
     return (
         <Modal ariaHideApp={false} className='h-fit rounded-[8px] p-[2.4rem] pb-0 w-[32.8rem]' isOpen={isModalOpen}>
             <Modal.Body>
                 <Text color='prominent' size='sm'>
-                    {ORDER_TIME_INFO_MESSAGE}
+                    {getOrderTimeInfoMessage(localize)}
                 </Text>
             </Modal.Body>
             <Modal.Footer hideBorder>

src/constants/ad-constants.ts

@@ -1,9 +1,10 @@
-import { localize } from '@deriv-com/translations';
+import { TLocalize } from 'types';
 
-export const COUNTERPARTIES_DROPDOWN_LIST = [
-    { text: localize('All'), value: 'all' },
-    { text: localize('Blocked'), value: 'blocked' },
-] as const;
+export const getCounterpartiesDropdownList = (localize: TLocalize) =>
+    [
+        { text: localize('All'), value: 'all' },
+        { text: localize('Blocked'), value: 'blocked' },
+    ] as const;
 
 export const RATE_TYPE = {
     FIXED: 'fixed',
@@ -25,45 +26,47 @@ export const ADVERT_TYPE = Object.freeze({
     SELL: 'Sell',
 });
 
-export const SORT_BY_LIST = Object.freeze([
-    { text: localize('Exchange rate'), value: 'rate' },
-    { text: localize('User rating'), value: 'rating' },
-]);
+export const getSortByList = (localize: TLocalize) =>
+    [
+        { text: localize('Exchange rate'), value: 'rate' },
+        { text: localize('User rating'), value: 'rating' },
+    ] as const;
 
 export const AD_CONDITION_TYPES = {
     COMPLETION_RATE: 'completionRates',
     JOINING_DATE: 'joiningDate',
     PREFERRED_COUNTRIES: 'preferredCountries',
 } as const;
 
-export const AD_CONDITION_CONTENT: Record<
-    string,
-    { description: string; options?: { label: string; value: number }[]; title: string }
-> = {
-    completionRates: {
-        description: localize(
-            'We’ll only show your ad to people with a completion rate higher than your selection. \n\nThe completion rate is the percentage of successful orders.'
-        ),
-        options: [
-            { label: '50%', value: 50 },
-            { label: '70%', value: 70 },
-            { label: '90%', value: 90 },
-        ],
-        title: localize('Completion rate of more than'),
-    },
-    joiningDate: {
-        description: localize(
-            'We’ll only show your ad to people who’ve been using Deriv P2P for longer than the time you choose.'
-        ),
-        options: [
-            { label: localize('15 days'), value: 15 },
-            { label: localize('30 days'), value: 30 },
-            { label: localize('60 days'), value: 60 },
-        ],
-        title: localize('Joined more than'),
-    },
-    preferredCountries: {
-        description: localize('We’ll only show your ad to people in the countries you choose.'),
-        title: localize('Preferred countries'),
-    },
-} as const;
+export const getAdConditionContent = (
+    localize: TLocalize
+): Record<string, { description: string; options?: { label: string; value: number }[]; title: string }> => {
+    return {
+        completionRates: {
+            description: localize(
+                'We’ll only show your ad to people with a completion rate higher than your selection. \n\nThe completion rate is the percentage of successful orders.'
+            ),
+            options: [
+                { label: '50%', value: 50 },
+                { label: '70%', value: 70 },
+                { label: '90%', value: 90 },
+            ],
+            title: localize('Completion rate of more than'),
+        },
+        joiningDate: {
+            description: localize(
+                'We’ll only show your ad to people who’ve been using Deriv P2P for longer than the time you choose.'
+            ),
+            options: [
+                { label: localize('15 days'), value: 15 },
+                { label: localize('30 days'), value: 30 },
+                { label: localize('60 days'), value: 60 },
+            ],
+            title: localize('Joined more than'),
+        },
+        preferredCountries: {
+            description: localize('We’ll only show your ad to people in the countries you choose.'),
+            title: localize('Preferred countries'),
+        },
+    } as const;
+};

src/constants/orders.ts

@@ -1,4 +1,4 @@
-import { localize } from '@deriv-com/translations';
+import { TLocalize } from 'types';
 
 export const ORDERS_STATUS = {
     ACTIVE_ORDERS: 'Active orders',
@@ -15,23 +15,25 @@ export const ORDERS_STATUS = {
 } as const;
 
 //TODO: Below constant to be removed once list is fetched from API
-export const ORDER_COMPLETION_TIME_LIST = [
-    {
-        text: localize('1 hour'),
-        value: '3600',
-    },
-    {
-        text: localize('45 minutes'),
-        value: '2700',
-    },
-    {
-        text: localize('30 minutes'),
-        value: '1800',
-    },
-    {
-        text: localize('15 minutes'),
-        value: '900',
-    },
-] as const;
+export const getOrderTimeCompletionList = (localize: TLocalize) =>
+    [
+        {
+            text: localize('1 hour'),
+            value: '3600',
+        },
+        {
+            text: localize('45 minutes'),
+            value: '2700',
+        },
+        {
+            text: localize('30 minutes'),
+            value: '1800',
+        },
+        {
+            text: localize('15 minutes'),
+            value: '900',
+        },
+    ] as const;
 
-export const ORDER_TIME_INFO_MESSAGE = 'Orders will expire if they aren’t completed within this time.';
+export const getOrderTimeInfoMessage = (localize: TLocalize) =>
+    localize('Orders will expire if they aren’t completed within this time.');

src/constants/payment-methods.ts

@@ -1,6 +1,7 @@
-// TODO: Remember to localise these strings
-export const PAYMENT_METHOD_CATEGORIES = Object.freeze({
-    bank: 'Bank Transfers',
-    ewallet: 'E-wallets',
-    other: 'Others',
+import { TLocalize } from 'types';
+
+export const getPaymentMethodCategories = (localize: TLocalize) => ({
+    bank: localize('Bank Transfers'),
+    ewallet: localize('E-wallets'),
+    other: localize('Others'),
 });

src/pages/buy-sell/screens/BuySellHeader/BuySellHeader.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Search } from '@/components';
 import { FilterModal } from '@/components/Modals';
-import { SORT_BY_LIST } from '@/constants';
+import { getSortByList } from '@/constants';
 import { useIsAdvertiserBarred, useModalManager } from '@/hooks/custom-hooks';
 import { TSortByValues } from '@/utils';
 import { LabelPairedBarsFilterMdBoldIcon, LabelPairedBarsFilterSmBoldIcon } from '@deriv/quill-icons';
@@ -73,7 +73,7 @@ const BuySellHeader = ({
                     </div>
                 </div>
                 <SortDropdown
-                    list={SORT_BY_LIST}
+                    list={getSortByList(localize)}
                     onSelect={setSortDropdownValue}
                     setIsFilterModalOpen={setIsFilterModalOpen}
                     value={sortDropdownValue}

src/pages/buy-sell/screens/BuySellTable/BuySellTable.tsx

@@ -1,16 +1,18 @@
 import { useEffect, useState } from 'react';
 import { RadioGroupFilterModal } from '@/components/Modals';
-import { ADVERT_TYPE, BUY_SELL, SORT_BY_LIST } from '@/constants';
+import { ADVERT_TYPE, BUY_SELL, getSortByList } from '@/constants';
 import { api } from '@/hooks';
 import { useModalManager, useQueryString } from '@/hooks/custom-hooks';
 import { TSortByValues } from '@/utils';
+import { useTranslations } from '@deriv-com/translations';
 import { BuySellHeader } from '../BuySellHeader';
 import { BuySellTableRenderer } from './BuySellTableRenderer';
 import './BuySellTable.scss';
 
 const TABS = [ADVERT_TYPE.BUY, ADVERT_TYPE.SELL];
 
 const BuySellTable = () => {
+    const { localize } = useTranslations();
     const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
     const { data: p2pSettingsData } = api.settings.useSettings();
     const { queryString, setQueryString } = useQueryString();
@@ -77,7 +79,7 @@ const BuySellTable = () => {
             {isModalOpenFor('RadioGroupFilterModal') && (
                 <RadioGroupFilterModal
                     isModalOpen
-                    list={SORT_BY_LIST}
+                    list={getSortByList(localize)}
                     onRequestClose={hideModal}
                     onToggle={onToggle}
                     selected={sortDropdownValue as string}

src/pages/my-ads/components/AdConditionBlockSelector/AdConditionBlockSelector.tsx

@@ -1,4 +1,5 @@
-import { AD_CONDITION_CONTENT, AD_CONDITION_TYPES } from '@/constants';
+import { AD_CONDITION_TYPES, getAdConditionContent } from '@/constants';
+import { useTranslations } from '@deriv-com/translations';
 import { AdConditionBlockElement } from '../AdConditionBlockElement';
 import { AdConditionContentHeader } from '../AdConditionContentHeader';
 
@@ -8,11 +9,12 @@ type TAdConditionBlockSelectorProps = {
     type: (typeof AD_CONDITION_TYPES)[keyof typeof AD_CONDITION_TYPES];
 };
 const AdConditionBlockSelector = ({ onClick, selectedValue, type }: TAdConditionBlockSelectorProps) => {
+    const { localize } = useTranslations();
     return (
         <div className='flex flex-col gap-[0.8rem] mb-[2.4rem]'>
             <AdConditionContentHeader type={type} />
             <div className='flex gap-[1.6rem]'>
-                {AD_CONDITION_CONTENT[type]?.options?.map(option => (
+                {getAdConditionContent(localize)[type]?.options?.map(option => (
                     <AdConditionBlockElement
                         isSelected={selectedValue === option.value}
                         key={option.value}

src/pages/my-ads/components/AdConditionBlockSelector/__tests__/AdConditionBlockSelector.spec.tsx

@@ -9,7 +9,7 @@ jest.mock('@deriv-com/ui', () => ({
 
 jest.mock('@/constants', () => ({
     ...jest.requireActual('@/constants'),
-    AD_CONDITION_CONTENT: {
+    getAdConditionContent: () => ({
         completionRates: {
             description: 'description',
             options: [
@@ -20,7 +20,7 @@ jest.mock('@/constants', () => ({
             ],
             title: 'title',
         },
-    },
+    }),
 }));
 describe('AdConditionBlockSelector', () => {
     it('should render the component as expected', () => {

src/pages/my-ads/components/AdConditionContentHeader/AdConditionContentHeader.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { AdConditionsModal } from '@/components/Modals';
-import { AD_CONDITION_CONTENT, AD_CONDITION_TYPES } from '@/constants';
+import { AD_CONDITION_TYPES, getAdConditionContent } from '@/constants';
 import { LabelPairedCircleInfoCaptionRegularIcon } from '@deriv/quill-icons';
+import { useTranslations } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 
 type TAdConditionContentHeaderProps = {
@@ -10,12 +11,13 @@ type TAdConditionContentHeaderProps = {
 
 const AdConditionContentHeader = ({ type }: TAdConditionContentHeaderProps) => {
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
 
     return (
         <div className='flex gap-[0.8rem] items-center'>
             <Text color='less-prominent' size={isMobile ? 'md' : 'sm'}>
-                {AD_CONDITION_CONTENT[type]?.title}
+                {getAdConditionContent(localize)[type]?.title}
             </Text>
             <Button
                 className='p-0 hover:bg-none'

src/pages/my-ads/components/AdConditionContentHeader/__tests__/AdConditionContentHeader.spec.tsx

@@ -10,12 +10,12 @@ jest.mock('@deriv-com/ui', () => ({
 
 jest.mock('@/constants', () => ({
     ...jest.requireActual('@/constants'),
-    AD_CONDITION_CONTENT: {
+    getAdConditionContent: () => ({
         completionRates: {
             description: 'description',
             title: 'title',
         },
-    },
+    }),
 }));
 
 const mockUseDevice = useDevice as jest.Mock;

src/pages/my-ads/components/AdFormController/AdFormController.tsx

@@ -52,13 +52,7 @@ const AdFormController = ({
                 </Button>
             ) : (
                 <Button size='lg' textSize={textSize}>
-                    {`${
-                        isEdit ? (
-                            <Localize i18n_default_text='Save changes' />
-                        ) : (
-                            <Localize i18n_default_text='Post ad' />
-                        )
-                    }`}
+                    {isEdit ? <Localize i18n_default_text='Save changes' /> : <Localize i18n_default_text='Post ad' />}
                 </Button>
             )}
         </div>

src/pages/my-ads/components/AdSummary/AdSummary.tsx

@@ -5,7 +5,7 @@ import { api } from '@/hooks';
 import { useQueryString } from '@/hooks/custom-hooks';
 import { percentOf, roundOffDecimal, setDecimalPlaces } from '@/utils';
 import { useExchangeRates } from '@deriv-com/api-hooks';
-import { Localize } from '@deriv-com/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { FormatUtils } from '@deriv-com/utils';
 
@@ -28,6 +28,7 @@ const AdSummary = ({
     rateType,
     type,
 }: TAdSummaryProps) => {
+    const { localize } = useTranslations();
     const { isMobile } = useDevice();
     const { queryString } = useQueryString();
     const adOption = queryString.formAction;
@@ -37,7 +38,7 @@ const AdSummary = ({
 
     const marketRateType = adOption === AD_ACTION.CREATE ? rateType : adRateType;
     const displayOfferAmount = offerAmount ? FormatUtils.formatMoney(Number(offerAmount), { currency }) : '';
-    const adText = adOption === AD_ACTION.CREATE ? 'creating' : 'editing';
+    const adText = adOption === AD_ACTION.CREATE ? localize('creating') : localize('editing');
     const adTypeText = type;
 
     let displayPriceRate: number | string = '';