chore: replace localize import with new library (deriv-com#16140)

* chore: replace localize import with new library * chore: removed unused component
kate-deriv · Jul 30, 2024 · 1486143 · 1486143
1 parent bd32ef2
commit 1486143
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 72 deletions.
diff --git a/__mocks__/translation.mock.js b/__mocks__/translation.mock.js
@@ -1,20 +1,48 @@
-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);
+import React from 'react';
 
-    return localizedText || null;
+const replaceValue = (text, values) => {
+    const valueMatch = text.match(/{{(\w+)}}/);
+    if (valueMatch) {
+        const valueKey = valueMatch[1];
+        return values[valueKey] || text;
+    }
+    return text;
 };
 
+const Localize = ({ i18n_default_text, components = [], values = {} }) => {
+    // Split text into parts, extracting placeholders for components
+    const parts = i18n_default_text.split(/(<\d+>.*?<\/\d+>|{{\w+}})/g);
+
+    return (
+        <>
+            {parts.map((part, index) => {
+                // Handle component placeholders
+                const componentMatch = part.match(/<(\d+)>(.*?)<\/\1>/);
+                if (componentMatch) {
+                    const componentIndex = parseInt(componentMatch[1]);
+                    const content = replaceValue(componentMatch[2], values);
+                    const Component = components[componentIndex];
+                    return Component ? React.cloneElement(Component, { key: index, children: content }) : content;
+                }
+                // Replace placeholders with actual values
+                return replaceValue(part, values);
+            })}
+        </>
+    );
+};
+
+const mockFn = jest.fn((text, args) => {
+    return text.replace(/{{(.*?)}}/g, (_, match) => args[match.trim()]);
+});
+
 // Mock for useTranslations hook
 const useTranslations = () => ({
-    localize: jest.fn((text, args) => {
-        return text.replace(/{{(.*?)}}/g, (_, match) => args[match.trim()]);
-    }),
+    localize: mockFn,
     currentLang: 'EN',
 });
 
-const localize = jest.fn(text => text);
+const localize = mockFn;
 
 const getAllowedLanguages = jest.fn(() => ({ EN: 'English', VI: 'Tiếng Việt' }));
 
-export { Localize, localize, useTranslations, getAllowedLanguages };
+export { Localize, localize, useTranslations, getAllowedLanguages };
diff --git a/packages/account/src/Components/financial-details/financial-details-partials.tsx b/packages/account/src/Components/financial-details/financial-details-partials.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Field, FormikValues, useFormikContext } from 'formik';
 import { Dropdown, SelectNative } from '@deriv/components';
 import { EMPLOYMENT_VALUES, TEmploymentStatus, shouldHideOccupationField } from '@deriv/shared';
-import { localize } from '@deriv/translations';
+import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 import {
     getAccountTurnoverList,
@@ -40,13 +40,14 @@ type TFinancialInformationProps = {
 const FinancialDetailsDropdownField = ({
     dropdown_list,
     field_key,
-    placeholder = localize('Please select'),
+    placeholder,
     label,
 }: TFinancialDetailsDropdownFieldProps) => {
     const { values, handleChange, handleBlur, touched, errors, setFieldValue } = useFormikContext<{
         [key: string]: string;
     }>();
     const { isDesktop } = useDevice();
+    const { localize } = useTranslations();
     return (
         <Field name={field_key}>
             {({ field }: FormikValues) => (
@@ -67,7 +68,7 @@ const FinancialDetailsDropdownField = ({
                         />
                     ) : (
                         <SelectNative
-                            placeholder={placeholder}
+                            placeholder={placeholder ?? localize('Please select')}
                             name={field.name}
                             label={label}
                             list_items={dropdown_list}
@@ -90,14 +91,15 @@ const FinancialDetailsDropdownField = ({
 const FinancialDetailsOccupationDropdownField = ({
     dropdown_list,
     field_key,
-    placeholder = localize('Please select'),
+    placeholder,
     label,
     employment_status,
 }: TFinancialDetailsDropdownFieldProps) => {
     const { values, handleChange, handleBlur, touched, errors, setFieldValue } = useFormikContext<{
         [key: string]: string;
     }>();
     const { isDesktop } = useDevice();
+    const { localize } = useTranslations();
 
     const getFormattedOccupationValues = () =>
         employment_status === EMPLOYMENT_VALUES.EMPLOYED && values?.occupation === EMPLOYMENT_VALUES.UNEMPLOYED
@@ -128,7 +130,7 @@ const FinancialDetailsOccupationDropdownField = ({
                     ) : (
                         <SelectNative
                             {...field}
-                            placeholder={placeholder}
+                            placeholder={placeholder ?? localize('Please select')}
                             name={field.name}
                             label={label}
                             list_items={dropdown_list}
@@ -152,6 +154,8 @@ const FinancialDetailsOccupationDropdownField = ({
  * @returns {JSX.Element}
  */
 const FinancialInformation = ({ employment_status }: TFinancialInformationProps) => {
+    const { localize } = useTranslations();
+
     return (
         <React.Fragment>
             <FinancialDetailsDropdownField

diff --git a/packages/account/src/Components/trading-assessment/risk-tolerance-warning-modal.tsx b/packages/account/src/Components/trading-assessment/risk-tolerance-warning-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Icon, Modal, Text, MobileDialog } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 
 type RiskToleranceWarningModalProps = {
@@ -21,6 +21,8 @@ const RiskToleranceWarningModal = ({
     has_sub_header = false,
 }: RiskToleranceWarningModalProps) => {
     const { isDesktop } = useDevice();
+    const { localize } = useTranslations();
+
     return (
         <React.Fragment>
             {isDesktop ? (

diff --git a/packages/account/src/Components/trading-assessment/test-warning-modal.tsx b/packages/account/src/Components/trading-assessment/test-warning-modal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MobileDialog, Modal } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { useTranslations } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
 
 type TestWarningModalProps = {
@@ -11,6 +11,8 @@ type TestWarningModalProps = {
 
 const TestWarningModal = ({ show_risk_modal, body_content, footer_content }: TestWarningModalProps) => {
     const { isDesktop } = useDevice();
+    const { localize } = useTranslations();
+
     return (
         <React.Fragment>
             {isDesktop ? (

diff --git a/packages/account/src/Components/trading-assessment/trading-assessment-dropdown.tsx b/packages/account/src/Components/trading-assessment/trading-assessment-dropdown.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { Field } from 'formik';
 import { Dropdown, Text, SelectNative } from '@deriv/components';
-import { localize } from '@deriv/translations';
+import { useTranslations } from '@deriv-com/translations';
 import { TTradingAssessmentForm, TQuestion } from 'Types';
 import { MAX_QUESTION_TEXT_LENGTH } from '../../Constants/trading-assessment';
 import { useDevice } from '@deriv-com/ui';
@@ -45,6 +45,7 @@ const TradingAssessmentDropdown = ({
     }, [values]);
 
     const { isDesktop } = useDevice();
+    const { localize } = useTranslations();
 
     const checkIfAllFieldsFilled = () => {
         if (values) {

diff --git a/packages/account/src/Components/trading-assessment/trading-assessment-form.tsx b/packages/account/src/Components/trading-assessment/trading-assessment-form.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { observer, useStore } from '@deriv/stores';
 import { Formik, Form, FormikErrors, FormikHelpers } from 'formik';
 import { Button, Modal, Text } from '@deriv/components';
-import { localize, Localize } from '@deriv/translations';
+import { useTranslations, Localize } from '@deriv-com/translations';
 import TradingAssessmentRadioButton from './trading-assessment-radio-buttons';
 import TradingAssessmentDropdown from './trading-assessment-dropdown';
 import { getTradingAssessmentQuestions } from '../../Constants/trading-assessment-questions';
@@ -41,6 +41,7 @@ const TradingAssessmentForm = observer(
         is_responsive,
     }: TradingAssessmentFormProps) => {
         const { traders_hub } = useStore();
+        const { localize } = useTranslations();
         const { is_eu_user } = traders_hub;
         const assessment_questions = getTradingAssessmentQuestions();
         const stored_items = parseInt(localStorage.getItem('current_question_index') ?? '0');

diff --git a/packages/account/src/Configs/financial-details-config.ts b/packages/account/src/Configs/financial-details-config.ts
@@ -7,7 +7,7 @@ import {
     EMPLOYMENT_VALUES,
     TEmploymentStatus,
 } from '@deriv/shared';
-import { localize } from '@deriv/translations';
+import { localize } from '@deriv-com/translations';
 
 type TFinancialDetailsConfig = {
     real_account_signup_target: string;

diff --git a/packages/account/src/Containers/toast-popup.tsx b/packages/account/src/Containers/toast-popup.tsx
@@ -5,33 +5,12 @@ import { Toast } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { useDevice } from '@deriv-com/ui';
 
-type TToastPopUp = {
-    portal_id?: string;
-    className: string;
-} & React.ComponentProps<typeof Toast>;
-
 type TNetworkStatusToastError = {
     status: string;
     portal_id: string;
     message: string;
 };
 
-export const ToastPopup = ({
-    portal_id = 'popup_root',
-    children,
-    className,
-    ...props
-}: React.PropsWithChildren<TToastPopUp>) => {
-    const new_portal_id = document.getElementById(portal_id);
-    if (!new_portal_id) return null;
-    return ReactDOM.createPortal(
-        <Toast className={clsx('dc-toast-popup', className)} {...props}>
-            {children}
-        </Toast>,
-        new_portal_id
-    );
-};
-
 /**
  * Network status Toast components
  */

diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-assessment.tsx
@@ -8,7 +8,7 @@ import { useHistory, withRouter } from 'react-router';
 import { FormSubmitErrorMessage, Loading, Button, Dropdown, Modal, Icon, SelectNative, Text } from '@deriv/components';
 import { routes, platforms, WS, shouldHideOccupationField } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
-import { localize, Localize } from '@deriv/translations';
+import { useTranslations, Localize } from '@deriv-com/translations';
 import LeaveConfirm from 'Components/leave-confirm';
 import IconMessageContent from 'Components/icon-message-content';
 import DemoMessage from 'Components/demo-message';
@@ -71,34 +71,37 @@ const ConfirmationContent = ({ className }: { className?: string }) => {
     );
 };
 
-const ConfirmationModal = ({ is_visible, toggleModal, onSubmit }: TConfirmationModal) => (
-    <Modal
-        className='financial-assessment-confirmation'
-        is_open={is_visible}
-        small
-        toggleModal={() => toggleModal(false)}
-        title={localize('Appropriateness Test, WARNING:')}
-    >
-        <Modal.Body>
-            <ConfirmationContent />
-        </Modal.Body>
-        <Modal.Footer>
-            <Button large onClick={() => toggleModal(false)} secondary>
-                <Localize i18n_default_text='Decline' />
-            </Button>
-            <Button
-                large
-                onClick={() => {
-                    onSubmit();
-                    toggleModal(false);
-                }}
-                primary
-            >
-                <Localize i18n_default_text='Accept' />
-            </Button>
-        </Modal.Footer>
-    </Modal>
-);
+const ConfirmationModal = ({ is_visible, toggleModal, onSubmit }: TConfirmationModal) => {
+    const { localize } = useTranslations();
+    return (
+        <Modal
+            className='financial-assessment-confirmation'
+            is_open={is_visible}
+            small
+            toggleModal={() => toggleModal(false)}
+            title={localize('Appropriateness Test, WARNING:')}
+        >
+            <Modal.Body>
+                <ConfirmationContent />
+            </Modal.Body>
+            <Modal.Footer>
+                <Button large onClick={() => toggleModal(false)} secondary>
+                    <Localize i18n_default_text='Decline' />
+                </Button>
+                <Button
+                    large
+                    onClick={() => {
+                        onSubmit();
+                        toggleModal(false);
+                    }}
+                    primary
+                >
+                    <Localize i18n_default_text='Accept' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
 
 const ConfirmationPage = ({ toggleModal, onSubmit }: TConfirmationPage) => (
     <div className='account__confirmation-page'>
@@ -128,9 +131,10 @@ const ConfirmationPage = ({ toggleModal, onSubmit }: TConfirmationPage) => (
         </div>
     </div>
 );
+
 const SubmittedPage = ({ platform, routeBackInApp }: TSubmittedPage) => {
     const history = useHistory();
-
+    const { localize } = useTranslations();
     const onClickButton = () => {
         if (platforms[platform].is_hard_redirect) {
             window.location.href = platforms[platform].url;
@@ -197,6 +201,7 @@ const FinancialAssessment = observer(() => {
     const is_mf = landing_company_shortcode === 'maltainvest';
 
     const history = useHistory();
+    const { localize } = useTranslations();
 
     const [is_loading, setIsLoading] = React.useState(true);
     const [is_confirmation_visible, setIsConfirmationVisible] = React.useState(false);

diff --git a/packages/account/src/Sections/Assessment/FinancialAssessment/financial-information-list.ts b/packages/account/src/Sections/Assessment/FinancialAssessment/financial-information-list.ts
@@ -1,4 +1,4 @@
-import { localize } from '@deriv/translations';
+import { localize } from '@deriv-com/translations';
 
 export const getIncomeSourceList = () => [
     {

diff --git a/packages/account/src/Sections/Assessment/TradingAssessment/trading-assessment.jsx b/packages/account/src/Sections/Assessment/TradingAssessment/trading-assessment.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { localize, Localize } from '@deriv/translations';
+import { Localize, useTranslations } from '@deriv-com/translations';
 import FormBody from 'Components/form-body';
 import FormSubHeader from 'Components/form-sub-header';
 import { RiskToleranceWarningModal, TestWarningModal } from 'Components/trading-assessment';
@@ -28,6 +28,7 @@ const populateData = form_data => {
 };
 const TradingAssessment = observer(() => {
     const { isDesktop } = useDevice();
+    const { localize } = useTranslations();
     const { client } = useStore();
     const { is_virtual, setFinancialAndTradingAssessment } = client;
     const history = useHistory();