Merge pull request binary-com#63 from suisin-deriv/suisin/WALL2278/fi…

…x_code_review

Suisin/wall2278/fix code review

packages/account/src/Components/currency-selector/currency-selector.tsx

@@ -80,7 +80,7 @@ const CurrencySelector = observer(
         has_wallet_account,
         value,
     }: TCurrencySelector) => {
-        const { client, ui } = useStore();
+        const { client, ui, traders_hub } = useStore();
 
         const {
             currency,
@@ -91,9 +91,10 @@ const CurrencySelector = observer(
             is_mt5_allowed,
             has_fiat,
             accounts,
-            is_eu,
         } = client;
 
+        const { is_eu_user } = traders_hub;
+
         const has_currency = Boolean(currency);
 
         const { real_account_signup, real_account_signup_target, resetRealAccountSignupParams, is_desktop, is_mobile } =
@@ -170,11 +171,11 @@ const CurrencySelector = observer(
         };
 
         const description = React.useMemo(() => {
-            const dmt5_label = is_eu ? localize('CFDs') : localize('Deriv MT5');
+            const dmt5_label = is_eu_user ? localize('CFDs') : localize('Deriv MT5');
             const platform_name_dxtrade = getPlatformSettings('dxtrade').name;
 
             if (is_dxtrade_allowed && is_mt5_allowed) {
-                if (is_eu) {
+                if (is_eu_user) {
                     return (
                         <Localize
                             i18n_default_text="Enjoy a seamless trading experience with the selected fiat account. Please note that once you've made your first deposit or created a real {{dmt5_label}} account, your account currency cannot be changed."
@@ -200,7 +201,7 @@ const CurrencySelector = observer(
             return (
                 <Localize i18n_default_text='You are limited to one fiat account. You won’t be able to change your account currency if you have already made your first deposit.' />
             );
-        }, [is_eu, is_dxtrade_allowed, is_mt5_allowed]);
+        }, [is_eu_user, is_dxtrade_allowed, is_mt5_allowed]);
 
         return (
             <Formik

packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx

@@ -4,6 +4,7 @@ import { isDesktop, isMobile } from '@deriv/shared';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import FinancialDetails from '../financial-details';
+import { StoreProvider, mockStore } from '@deriv/stores';
 
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
@@ -38,8 +39,18 @@ describe('<FinancialDetails />', () => {
         expect(screen.getByText('Source of wealth')).toBeInTheDocument();
     };
 
+    const mock_store = mockStore({});
+
+    const renderComponent = () => {
+        render(
+            <StoreProvider store={mock_store}>
+                <FinancialDetails {...mock_props} />
+            </StoreProvider>
+        );
+    };
+
     it('should render "FinancialDetails" for desktop', () => {
-        render(<FinancialDetails {...mock_props} />);
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -54,7 +65,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        render(<FinancialDetails {...mock_props} />);
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -66,7 +77,7 @@ describe('<FinancialDetails />', () => {
     });
 
     it('should trigger "Previous" button', () => {
-        render(<FinancialDetails {...mock_props} />);
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -81,7 +92,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        render(<FinancialDetails {...mock_props} />);
+        renderComponent();
 
         fieldsRenderCheck();
 
@@ -127,7 +138,7 @@ describe('<FinancialDetails />', () => {
         (isDesktop as jest.Mock).mockReturnValue(false);
         (isMobile as jest.Mock).mockReturnValue(true);
 
-        render(<FinancialDetails {...mock_props} />);
+        renderComponent();
 
         const select_inputs = screen.getAllByRole('combobox');
 

packages/account/src/Components/financial-details/financial-details-partials.tsx

@@ -11,7 +11,7 @@ import {
     getNetIncomeList,
     getOccupationList,
     getSourceOfWealthList,
-} from 'Configs/financial-details-config';
+} from '../../Configs/financial-details-config';
 
 type TFinancialDetailsDropdownFieldProps = {
     dropdown_list: Array<object>;

packages/account/src/Components/financial-details/financial-details.tsx

@@ -11,9 +11,10 @@ import {
 } from '@deriv/components';
 import { isDesktop, isMobile } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
+import { observer, useStore } from '@deriv/stores';
 import FinancialInformation from './financial-details-partials';
 import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
-import InlineNoteWithIcon from 'Components/inline-note-with-icon';
+import InlineNoteWithIcon from '../inline-note-with-icon';
 
 type TFinancialDetailsFormValues = {
     income_source: string;
@@ -49,14 +50,17 @@ type TFinancialDetails = {
  * @param {TFinancialDetails} props  - props of the component
  * @returns {React.ReactNode} React component that renders FinancialDetails form.
  */
-const FinancialDetails = (props: TFinancialDetails) => {
+const FinancialDetails = observer((props: TFinancialDetails) => {
     const handleCancel = (values: TFinancialDetailsFormValues) => {
         const current_step = props.getCurrentStep() - 1;
         props.onSave(current_step, values);
         props.onCancel(current_step, props.goToPreviousStep);
     };
 
-    const { is_eu_user } = props;
+    const {
+        traders_hub: { is_eu_user },
+    } = useStore();
+
     const handleValidate = (values: TFinancialDetailsFormValues) => {
         const { errors } = splitValidationResultTypes(props.validate(values));
         return errors;
@@ -87,18 +91,17 @@ const FinancialDetails = (props: TFinancialDetails) => {
                                     height_offset='110px'
                                     is_disabled={isDesktop()}
                                 >
-                                    {is_eu_user && (
+                                    {is_eu_user ? (
                                         <div className='details-form__banner-container'>
                                             <InlineNoteWithIcon
                                                 icon='IcAlertWarning'
-                                                message={localize(
-                                                    'We collect information about your employment as part of our due diligence obligations, as required by anti-money laundering legislation.'
-                                                )}
+                                                message={
+                                                    <Localize i18n_default_text='We collect information about your employment as part of our due diligence obligations, as required by anti-money laundering legislation.' />
+                                                }
                                                 title={localize('Why do we collect this?')}
                                             />
                                         </div>
-                                    )}
-                                    {!is_eu_user && (
+                                    ) : (
                                         <Text
                                             as='p'
                                             color='prominent'
@@ -136,6 +139,6 @@ const FinancialDetails = (props: TFinancialDetails) => {
             }}
         </Formik>
     );
-};
+});
 
 export default FinancialDetails;