dhruv/Fixed console errors in personal details/COJ-1334

packages/account/src/Components/leave-confirm/leave-confirm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteComponentProps, useHistory, withRouter } from 'react-router-dom';
+import { useHistory, useLocation, RouteComponentProps, withRouter } from 'react-router-dom';
 import { FormikConsumer } from 'formik';
 import { Button, Icon, Modal } from '@deriv/components';
 import { localize } from '@deriv/translations';
@@ -40,48 +40,50 @@ const LeaveConfirmMessage = ({ back, leave }: TLeaveConfirmMessage) => {
         </IconMessageContent>
     );
 };
-/**
- * Blocks routing if Formik form is dirty
- * Has to be a child of <Formik> for FormikConsumer to work
- */
 export const TransitionBlocker = ({ dirty, onDirty }: TTransitionBlocker) => {
-    const [show, setShow] = React.useState(false);
-    const [next_location, setNextLocation] = React.useState<{ pathname: string } | null>(null);
+    const [showModal, setShowModal] = React.useState(false);
     const history = useHistory();
+    const location = useLocation();
     const { isMobile } = useDevice();
-
+    const [nextLocation, setNextLocation] = React.useState(location.pathname);
     React.useEffect(() => {
+        const unblock = history.block((location: Location) => {
+            if (dirty && !showModal) {
+                if (onDirty) onDirty(false);
+                setNextLocation(location.pathname);
+                setShowModal(true);
+                return false;
+            }
+            return true;
+        });
         return () => unblock();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const unblock = history.block((location: { pathname: string }) => {
-        if (dirty) {
-            if (onDirty) onDirty(false);
-            if (show) leave();
-            setShow(true);
-            setNextLocation(location);
+    }, [dirty, showModal, history, onDirty]);
+    const leave = React.useCallback(() => {
+        if (nextLocation) {
+            setShowModal(false);
+            history.push(nextLocation);
+            if (onDirty) {
+                onDirty(false);
+            }
         }
-        return !dirty;
-    });
-    const leave = () => {
-        if (next_location?.pathname) {
-            const { pathname } = next_location;
-            unblock();
-            history.push(pathname);
-        } else history.push(null);
-    };
+    }, [nextLocation, history, onDirty]);
     const back = () => {
-        setNextLocation(null);
-        setShow(false);
-        if (onDirty) onDirty(true);
+        setShowModal(false);
+        setNextLocation(location.pathname);
+        if (onDirty) {
+            onDirty(true);
+        }
+        setShowModal(false);
+        if (onDirty) {
+            onDirty(true);
+        }
     };
-
     return (
         <>
-            {show && isMobile ? (
+            {showModal && isMobile ? (
                 <LeaveConfirmMessage back={back} leave={leave} />
             ) : (
-                <Modal is_open={show} small toggleModal={back}>
+                <Modal is_open={showModal} small toggleModal={back}>
                     <Modal.Body>
                         <LeaveConfirmMessage back={back} leave={leave} />
                     </Modal.Body>
@@ -90,10 +92,15 @@ export const TransitionBlocker = ({ dirty, onDirty }: TTransitionBlocker) => {
         </>
     );
 };
+
 export const TransitionBlockerWithRouter = withRouter(TransitionBlocker);
-const LeaveConfirm = ({ onDirty }: { onDirty?: (prop: boolean) => void }) => (
-    <FormikConsumer>
-        {formik => <TransitionBlockerWithRouter onDirty={onDirty} dirty={formik.dirty && formik.submitCount === 0} />}
-    </FormikConsumer>
-);
+const LeaveConfirm = ({ onDirty }: { onDirty?: (prop: boolean) => void }) => {
+    return (
+        <FormikConsumer>
+            {formik => (
+                <TransitionBlockerWithRouter onDirty={onDirty} dirty={formik.dirty && formik.submitCount === 0} />
+            )}
+        </FormikConsumer>
+    );
+};
 export default LeaveConfirm;

packages/core/src/App/Containers/ResetPasswordModal/__tests__/reset-password-modal.spec.tsx

@@ -20,15 +20,15 @@ jest.mock('@deriv/shared', () => ({
     })),
     redirectToLogin: jest.fn(),
 }));
-
+const pass = '@rnv!sv';
 const mock = {
     ui: {
         is_reset_password_modal_visible: true,
         is_loading: false,
     },
     client: {
         verification_code: {
-            reset_password: '@rnv!sv',
+            reset_password: pass,
         },
         setVerificationCode: jest.fn(),
         logout: jest.fn(() => Promise.resolve()),
@@ -80,16 +80,15 @@ describe('ResetPasswordModal', () => {
 
     it('should change input of password and trigger change password button', async () => {
         WS.resetPassword.mockReturnValue(Promise.resolve({ reset_password: 1 }));
-
+        const mock_password = 'Tpt#&te1743!@';
         renderComponent(store);
-
         await waitForElementToBeRemoved(() => screen.getByTestId('dt_initial_loader'));
 
         const new_password = screen.getByLabelText('Create a password', { selector: 'input' });
 
-        userEvent.type(new_password, 'Tpt#&te1743!@');
+        userEvent.type(new_password, mock_password);
 
-        expect(new_password).toHaveValue('Tpt#&te1743!@');
+        expect(new_password).toHaveValue(mock_password);
         expect(screen.getByRole('button', { name: /Reset my password/i })).toBeEnabled();
 
         userEvent.click(
@@ -99,18 +98,18 @@ describe('ResetPasswordModal', () => {
         );
         await waitFor(() => {
             expect(WS.resetPassword).toHaveBeenCalledWith({
-                new_password: 'Tpt#&te1743!@',
+                new_password: mock_password,
                 reset_password: 1,
-                verification_code: '@rnv!sv',
+                verification_code: pass,
             });
         });
         expect(store.client.setVerificationCode).toHaveBeenCalledTimes(1);
 
         await waitFor(() => {
             expect(WS.resetPassword).toHaveBeenCalledWith({
-                new_password: 'Tpt#&te1743!@',
+                new_password: mock_password,
                 reset_password: 1,
-                verification_code: '@rnv!sv',
+                verification_code: pass,
             });
         });
 

packages/core/src/Stores/traders-hub-store.js

@@ -126,6 +126,8 @@ export default class TradersHubStore extends BaseStore {
             toggleWalletsUpgrade: action.bound,
             setWalletsMigrationFailedPopup: action.bound,
             cleanup: action.bound,
+            setIsCFDRestrictedCountry: action.bound,
+            setIsFinancialRestrictedCountry: action.bound,
             setIsSetupRealAccountOrGoToDemoModalVisible: action.bound,
         });
 
@@ -207,6 +209,14 @@ export default class TradersHubStore extends BaseStore {
         this.active_modal_wallet_id = wallet_id;
     }
 
+    setIsCFDRestrictedCountry(value) {
+        this.is_cfd_restricted_country = value;
+    }
+
+    setIsFinancialRestrictedCountry(value) {
+        this.is_financial_restricted_country = value;
+    }
+
     get no_MF_account() {
         const { has_maltainvest_account } = this.root_store.client;
         return this.selected_region === 'EU' && !has_maltainvest_account;
@@ -453,7 +463,7 @@ export default class TradersHubStore extends BaseStore {
         const is_restricted =
             this.is_financial_restricted_country || (financial_company?.shortcode === 'svg' && !gaming_company);
         // update the flag in the store
-        this.is_financial_restricted_country = is_restricted;
+        this.setIsFinancialRestrictedCountry(is_restricted);
 
         return is_restricted;
     }
@@ -464,7 +474,7 @@ export default class TradersHubStore extends BaseStore {
         const is_restricted =
             this.is_cfd_restricted_country || (gaming_company?.shortcode === 'svg' && !financial_company);
         // update the flag in the store
-        this.is_cfd_restricted_country = is_restricted;
+        this.setIsCFDRestrictedCountry(is_restricted);
 
         return is_restricted;
     }
@@ -859,8 +869,8 @@ export default class TradersHubStore extends BaseStore {
             (!this.root_store.client.is_logged_in && localStorage.getItem('active_loginid') === 'null')
         ) {
             localStorage.removeItem('traders_hub_store');
-            this.is_cfd_restricted_country = false;
-            this.is_financial_restricted_country = false;
+            this.setIsFinancialRestrictedCountry(false);
+            this.setIsCFDRestrictedCountry(false);
             this.available_platforms = [];
         }
     }

packages/stores/src/mockStore.ts

@@ -545,6 +545,10 @@ const mock = (): TStores & { is_mock: boolean } => {
             startTrade: jest.fn(),
             showTopUpModal: jest.fn(),
             is_regulators_compare_modal_visible: false,
+            is_cfd_restricted_country: false,
+            setIsCFDRestrictedCountry: jest.fn(),
+            is_financial_restricted_country: false,
+            setIsFinancialRestrictedCountry: jest.fn(),
             is_setup_real_account_or_go_to_demo_modal_visible: false,
             setIsSetupRealAccountOrGoToDemoModalVisible: jest.fn(),
         },
@@ -744,6 +748,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             data: undefined,
             update: jest.fn(),
             unmount: jest.fn(),
+            cleanup: jest.fn(),
         },
         gtm: {
             is_gtm_applicable: false,

packages/stores/src/stores/FeatureFlagsStore.ts

@@ -9,11 +9,16 @@ const FLAGS = {
 } satisfies Record<string, boolean>;
 
 export default class FeatureFlagsStore extends BaseStore<{ [k in keyof typeof FLAGS]: boolean }> {
+    private static instance: FeatureFlagsStore | null = null;
+
     constructor() {
+        if (FeatureFlagsStore.instance) {
+            FeatureFlagsStore.instance.cleanup();
+        }
+
         super('FeatureFlagsStore', () => {
             // Set the default values for the first time.
             if (!this.data) this.update(FLAGS);
-
             // Update the store data if a new flag was added or removed.
             if (this.data && Object.keys(this.data).length !== Object.keys(FLAGS).length) {
                 this.update(old => {
@@ -30,5 +35,10 @@ export default class FeatureFlagsStore extends BaseStore<{ [k in keyof typeof FL
         });
 
         this.data = FLAGS;
+        FeatureFlagsStore.instance = this;
+    }
+
+    cleanup() {
+        this.unmount();
     }
 }

packages/stores/types.ts

@@ -1100,6 +1100,10 @@ type TTradersHubStore = {
     showTopUpModal: (existing_account?: DetailsOfEachMT5Loginid) => void;
     is_regulators_compare_modal_visible: boolean;
     is_setup_real_account_or_go_to_demo_modal_visible: boolean;
+    is_cfd_restricted_country: boolean;
+    is_financial_restricted_country: boolean;
+    setIsCFDRestrictedCountry: (value: boolean) => void;
+    setIsFinancialRestrictedCountry: (value: boolean) => void;
     setIsSetupRealAccountOrGoToDemoModalVisible: (value: boolean) => void;
 };