Aizad/88786/mt5 redirection modal fix (#7663)

* chore: fix mt5 redirection modal closing on trade

* fix: modal and dialog close seperately after clicking outside

* fix: re-add dialog_status condition back to redirect-notice-modal

* fix: reverted the previous changes

* fix: remove useclickoutside for page overlay

* fix: update deriv/api package to latest version

* fix: updated package version to match with master

* Merge branch 'develop' of github.com:binary-com/deriv-app into aizad/88786/mt5-redirection-modal-fix

* fix: codecov and circleci

* fix: upgrade package

packages/cfd/src/Containers/mt5-trade-modal.tsx

@@ -10,8 +10,6 @@ import DerivXTradeModal from './derivx-trade-modal';
 
 type TMT5TradeModalProps = {
     mt5_trade_account: Required<DetailsOfEachMT5Loginid>;
-    disableApp: () => void;
-    enableApp: () => void;
     is_eu_user: boolean;
     is_open: boolean;
     onPasswordManager: (
@@ -30,8 +28,6 @@ type TMT5TradeModalProps = {
 
 const MT5TradeModal = ({
     mt5_trade_account,
-    disableApp,
-    enableApp,
     is_eu_user,
     is_open,
     onPasswordManager,
@@ -69,8 +65,6 @@ const MT5TradeModal = ({
         <React.Suspense fallback={<UILoader />}>
             <DesktopWrapper>
                 <Modal
-                    disableApp={disableApp}
-                    enableApp={enableApp}
                     is_open={is_open}
                     title={localize('Trade')}
                     toggleModal={toggleModal}
@@ -98,11 +92,9 @@ const MT5TradeModal = ({
     );
 };
 
-export default connect(({ modules: { cfd }, modules, ui, common, traders_hub }: RootStore) => ({
+export default connect(({ modules: { cfd }, modules, common, traders_hub }: RootStore) => ({
     dxtrade_tokens: cfd.dxtrade_tokens,
     platform: common.platform,
-    disableApp: ui.disableApp,
-    enableApp: ui.enableApp,
     mt5_trade_account: modules.cfd.mt5_trade_account,
     show_eu_related_content: traders_hub.show_eu_related_content,
 }))(MT5TradeModal);

packages/components/src/components/modal/modal.tsx

@@ -82,7 +82,7 @@ const ModalElement = ({
         modal_root_ref.current?.querySelectorAll(portal_elements_selector.join(', ')).length;
 
     const validateClickOutside = (e: IClickEvent): boolean => {
-        const is_absolute_modal_visible = document.getElementById('modal_root_absolute')?.hasChildNodes();
+        const is_absolute_modal_visible = document.getElementById('popup_root')?.hasChildNodes();
         const path = e.path ?? e.composedPath?.();
         return (
             has_close_icon &&

packages/components/src/components/page-overlay/page-overlay.tsx

@@ -26,7 +26,6 @@ const PageOverlay = ({
     header_classname,
 }: React.PropsWithChildren<TPageOverlay>) => {
     const page_overlay_ref = React.useRef<HTMLDivElement>(null);
-    useOnClickOutside(page_overlay_ref, onClickClose, () => !!(is_open && portal_id));
 
     const el_page_overlay = (
         <div

packages/core/src/App/Components/Elements/Modals/RedirectNotice/redirect-notice-modal.jsx

@@ -53,20 +53,18 @@ const RedirectNoticeModal = ({ is_logged_in, is_eu, portal_id }) => {
     }, [is_logged_in, is_eu]);
 
     return ReactDOM.createPortal(
-        dialog_status ? (
-            <Dialog
-                className='redirect-notice'
-                is_visible={dialog_status}
-                title='Redirect notice'
-                is_open={dialog_status}
-                cancel_button_text={localize('Cancel')}
-                confirm_button_text={localize('Proceed')}
-                onCancel={onCancelDialog}
-                onConfirm={onConfirmDialog}
-            >
-                {localize('You are being redirected to an external website.')}
-            </Dialog>
-        ) : null,
+        <Dialog
+            className='redirect-notice'
+            is_visible={dialog_status}
+            title='Redirect notice'
+            cancel_button_text={localize('Cancel')}
+            confirm_button_text={localize('Proceed')}
+            onCancel={onCancelDialog}
+            onConfirm={onConfirmDialog}
+            dismissable={onCancelDialog}
+        >
+            {localize('You are being redirected to an external website.')}
+        </Dialog>,
         document.getElementById(portal_id)
     );
 };