fix: missing translations

deriv-com · Sep 12, 2024 · 5007387 · 5007387
1 parent d74fd0c
commit 5007387
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 19 deletions.
diff --git a/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx b/src/components/BuySellForm/BuySellPaymentSection/BuySellPaymentSection.tsx
@@ -1,10 +1,10 @@
 import { Dispatch, SetStateAction, useCallback, useReducer } from 'react';
-import { TPaymentMethod, TSelectedPaymentMethod } from 'types';
+import { TFormState, TPaymentMethod, TReducerAction, TSelectedPaymentMethod } from 'types';
 import { LightDivider, PaymentMethodForm } from '@/components';
 import { useModalManager } from '@/hooks';
 import { advertiserPaymentMethodsReducer } from '@/reducers';
 import { sortPaymentMethodsWithAvailability } from '@/utils';
-import { Localize } from '@deriv-com/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Text, useDevice } from '@deriv-com/ui';
 import { PaymentMethodCard } from '../../PaymentMethodCard';
 
@@ -25,8 +25,13 @@ const BuySellPaymentSection = ({
 }: TBuySellPaymentSectionProps) => {
     const { isDesktop } = useDevice();
     const sortedList = sortPaymentMethodsWithAvailability(availablePaymentMethods);
+    const { localize } = useTranslations();
 
-    const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {});
+    const [formState, dispatch] = useReducer(
+        (currentState: TFormState, action: TReducerAction) =>
+            advertiserPaymentMethodsReducer(currentState, action, localize),
+        {}
+    );
     const { hideModal, isModalOpenFor, showModal } = useModalManager();
 
     const handleAddPaymentMethod = (displayName: string, selectedPaymentMethod?: TSelectedPaymentMethod) => {

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import Calendar, { CalendarProps } from 'react-calendar';
 import { useOnClickOutside } from 'usehooks-ts';
 import { customFormatShortWeekday, unixToDateString } from '@/utils';
+import { LocalStorageUtils } from '@deriv-com/utils';
 import DateTextField from '../DateTextField/DateTextField';
 import 'react-calendar/dist/Calendar.css';
 import './DatePicker.scss';
@@ -35,6 +36,7 @@ const DatePicker = ({
     const [selectedDate, setSelectedDate] = useState<Date | null>(value ? new Date(value) : null);
     const [isCalendarOpen, setIsCalendarOpen] = useState(false);
     const datePickerRef = useRef<HTMLDivElement>(null);
+    const currentLang = LocalStorageUtils.getValue<string>('i18n_language') || 'EN';
 
     const toggleCalendar = () => {
         setIsCalendarOpen(prevState => !prevState);
@@ -87,6 +89,7 @@ const DatePicker = ({
                 >
                     <Calendar
                         formatShortWeekday={customFormatShortWeekday}
+                        locale={currentLang.toLowerCase()}
                         maxDate={maxDate}
                         minDate={minDate}
                         onChange={handleDateChange}

diff --git a/src/components/Modals/RatingModal/RatingModal.tsx b/src/components/Modals/RatingModal/RatingModal.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { StarRating } from '@/components';
 import { api } from '@/hooks';
 import { StandaloneThumbsDownRegularIcon, StandaloneThumbsUpRegularIcon } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Modal, Text, useDevice } from '@deriv-com/ui';
 import './RatingModal.scss';
 
@@ -24,6 +24,7 @@ const RatingModal = ({
     onRequestClose,
     orderId,
 }: TRatingModalProps) => {
+    const { localize } = useTranslations();
     const [rating, setRating] = useState(0);
     const [isNoSelected, setIsNoSelected] = useState(false);
     const [isYesSelected, setIsYesSelected] = useState(false);
@@ -82,7 +83,7 @@ const RatingModal = ({
                         <Text size='sm'>
                             <Localize
                                 i18n_default_text='Would you recommend this {{value}}?'
-                                values={{ value: isBuyOrder ? 'seller' : 'buyer' }}
+                                values={{ value: isBuyOrder ? localize('seller') : localize('buyer') }}
                             />
                         </Text>
                         <div className='mt-6 flex gap-3'>

diff --git a/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx b/src/pages/my-ads/components/SellAdPaymentSelection/SellAdPaymentSelection.tsx
@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useReducer } from 'react';
-import { TAdvertiserPaymentMethod, TSelectedPaymentMethod } from 'types';
+import { TAdvertiserPaymentMethod, TFormState, TReducerAction, TSelectedPaymentMethod } from 'types';
 import { PaymentMethodCard, PaymentMethodForm } from '@/components';
 import { api } from '@/hooks';
 import { useIsAdvertiser, useModalManager } from '@/hooks/custom-hooks';
 import { advertiserPaymentMethodsReducer } from '@/reducers';
 import { LabelPairedPlusLgBoldIcon } from '@deriv/quill-icons';
-import { Localize } from '@deriv-com/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import { Button, Text, useDevice } from '@deriv-com/ui';
 import './SellAdPaymentSelection.scss';
 
@@ -19,7 +19,12 @@ const SellAdPaymentSelection = ({ onSelectPaymentMethod, selectedPaymentMethodId
     const { data: advertiserPaymentMethods, get } = api.advertiserPaymentMethods.useGet();
     const { hideModal, isModalOpenFor, showModal } = useModalManager({ shouldReinitializeModals: false });
 
-    const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {});
+    const { localize } = useTranslations();
+    const [formState, dispatch] = useReducer(
+        (currentState: TFormState, action: TReducerAction) =>
+            advertiserPaymentMethodsReducer(currentState, action, localize),
+        {}
+    );
 
     useEffect(() => {
         if (isAdvertiser) {

diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethods.tsx b/src/pages/my-profile/screens/PaymentMethods/PaymentMethods.tsx
@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useReducer } from 'react';
-import { TSelectedPaymentMethod } from 'types';
+import { TFormState, TReducerAction, TSelectedPaymentMethod } from 'types';
 import { PaymentMethodForm } from '@/components';
 import { api } from '@/hooks';
 import { useIsAdvertiser } from '@/hooks/custom-hooks';
 import { advertiserPaymentMethodsReducer } from '@/reducers';
+import { useTranslations } from '@deriv-com/translations';
 import { Loader } from '@deriv-com/ui';
 import { PaymentMethodsEmpty } from './PaymentMethodsEmpty';
 import { PaymentMethodsList } from './PaymentMethodsList';
@@ -16,7 +17,12 @@ import { PaymentMethodsList } from './PaymentMethodsList';
 const PaymentMethods = () => {
     const isAdvertiser = useIsAdvertiser();
     const { data: p2pAdvertiserPaymentMethods, get, isPending: isLoading } = api.advertiserPaymentMethods.useGet();
-    const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {});
+    const { localize } = useTranslations();
+    const [formState, dispatch] = useReducer(
+        (currentState: TFormState, action: TReducerAction) =>
+            advertiserPaymentMethodsReducer(currentState, action, localize),
+        {}
+    );
 
     useEffect(() => {
         if (isAdvertiser) {

diff --git a/src/reducers/__tests__/advertiserPaymentMethodsReducer.spec.ts b/src/reducers/__tests__/advertiserPaymentMethodsReducer.spec.ts
@@ -23,6 +23,7 @@ const mockPaymentMethod: Parameters<typeof advertiserPaymentMethodsReducer>[0]['
     id: 'bank_transfer',
     method: 'bank_transfer',
 };
+const localize = jest.fn(text => text);
 describe('advertiserPaymentMethodsReducer', () => {
     it('should return the correct object when the action type is add and a selected payment method is provided', () => {
         const action: Parameters<typeof advertiserPaymentMethodsReducer>[1] = {
@@ -32,7 +33,7 @@ describe('advertiserPaymentMethodsReducer', () => {
             },
             type: 'ADD',
         };
-        expect(advertiserPaymentMethodsReducer(mockInitialState, action)).toEqual({
+        expect(advertiserPaymentMethodsReducer(mockInitialState, action, localize)).toEqual({
             actionType: 'ADD',
             isVisible: true,
             selectedPaymentMethod: mockPaymentMethod,
@@ -44,7 +45,7 @@ describe('advertiserPaymentMethodsReducer', () => {
             payload: {},
             type: 'ADD',
         };
-        expect(advertiserPaymentMethodsReducer(mockInitialState, action)).toEqual({
+        expect(advertiserPaymentMethodsReducer(mockInitialState, action, localize)).toEqual({
             actionType: 'ADD',
             isVisible: true,
             title: 'Add payment method',
@@ -58,7 +59,7 @@ describe('advertiserPaymentMethodsReducer', () => {
             },
             type: 'EDIT',
         };
-        expect(advertiserPaymentMethodsReducer(mockInitialState, action)).toEqual({
+        expect(advertiserPaymentMethodsReducer(mockInitialState, action, localize)).toEqual({
             actionType: 'EDIT',
             isVisible: true,
             selectedPaymentMethod: { ...mockPaymentMethod, display_name: 'Bank Transfer 1' },
@@ -73,7 +74,7 @@ describe('advertiserPaymentMethodsReducer', () => {
             },
             type: 'DELETE',
         };
-        expect(advertiserPaymentMethodsReducer(mockInitialState, action)).toEqual({
+        expect(advertiserPaymentMethodsReducer(mockInitialState, action, localize)).toEqual({
             actionType: 'DELETE',
             selectedPaymentMethod: mockPaymentMethod,
         });
@@ -82,6 +83,6 @@ describe('advertiserPaymentMethodsReducer', () => {
         const action: Parameters<typeof advertiserPaymentMethodsReducer>[1] = {
             type: 'RESET',
         };
-        expect(advertiserPaymentMethodsReducer(mockInitialState, action)).toEqual({});
+        expect(advertiserPaymentMethodsReducer(mockInitialState, action, localize)).toEqual({});
     });
 });
diff --git a/src/reducers/advertiserPaymentMethodsReducer.tsx b/src/reducers/advertiserPaymentMethodsReducer.tsx
@@ -1,4 +1,4 @@
-import { TFormState, TReducerAction } from 'types';
+import { TFormState, TLocalize, TReducerAction } from 'types';
 
 /**
  * @name advertiserPaymentMethodsReducer
@@ -9,7 +9,7 @@ import { TFormState, TReducerAction } from 'types';
  * @returns The new state after applying the action.
  * @example const [formState, dispatch] = useReducer(advertiserPaymentMethodsReducer, {});
  */
-const advertiserPaymentMethodsReducer = (currentState: TFormState, action: TReducerAction) => {
+const advertiserPaymentMethodsReducer = (currentState: TFormState, action: TReducerAction, localize: TLocalize) => {
     // TODO: Remember to translate the strings in this reducer function
     switch (action.type) {
         case 'ADD': {
@@ -24,7 +24,7 @@ const advertiserPaymentMethodsReducer = (currentState: TFormState, action: TRedu
                           method: action.payload?.selectedPaymentMethod?.method,
                       }
                     : undefined,
-                title: 'Add payment method',
+                title: localize('Add payment method'),
             };
         }
         case 'EDIT': {
@@ -38,7 +38,7 @@ const advertiserPaymentMethodsReducer = (currentState: TFormState, action: TRedu
                     id: action.payload?.selectedPaymentMethod?.id,
                     method: action.payload?.selectedPaymentMethod?.method,
                 },
-                title: 'Edit payment method',
+                title: localize('Edit payment method'),
             };
         }
         case 'DELETE': {