Moiz- BOT-2689 - Popup and Welcome to Deriv Bot Popup overlaping each other

src/components/tnc-status-update-modal/tnc-status-update-modal.tsx

@@ -21,12 +21,17 @@ const TncStatusUpdateModal: React.FC = observer(() => {
     React.useEffect(() => {
         if (is_tnc_needed) {
             setIsTncOpen(true);
+        } else {
+            setIsTncOpen(false);
         }
     }, [is_tnc_needed]);
 
     const onClick = async () => {
         if (isAuthorized) {
             await api_base.api.send({ tnc_approval: 1 });
+            if (client.landing_company_shortcode) {
+                client.updateTncStatus(client.landing_company_shortcode, 1);
+            }
             setIsTncOpen(false);
         }
     };

src/pages/dashboard/info-panel.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import Modal from '@/components/shared_ui/modal';
 import Text from '@/components/shared_ui/text';
 import { DBOT_TABS } from '@/constants/bot-contents';
+import useIsTNCNeeded from '@/hooks/useIsTNCNeeded';
 import { useStore } from '@/hooks/useStore';
 import { LegacyClose1pxIcon } from '@deriv/quill-icons/Legacy';
 import { useDevice } from '@deriv-com/ui';
@@ -11,6 +13,9 @@ import { SIDEBAR_INTRO } from './constants';
 const InfoPanel = observer(() => {
     const { isDesktop } = useDevice();
     const { dashboard } = useStore();
+    const is_tnc_needed = useIsTNCNeeded();
+    const [is_tour_open, setIsTourOpen] = React.useState(false);
+
     const {
         active_tour,
         is_info_panel_visible,
@@ -31,9 +36,22 @@ const InfoPanel = observer(() => {
 
     const handleClose = () => {
         setInfoPanelVisibility(false);
+        setIsTourOpen(false);
         localStorage.setItem('dbot_should_show_info', JSON.stringify(Date.now()));
     };
 
+    React.useEffect(() => {
+        if (is_tnc_needed) {
+            setIsTourOpen(false);
+        } else {
+            if (is_info_panel_visible) {
+                setIsTourOpen(true);
+            } else {
+                setIsTourOpen(false);
+            }
+        }
+    }, [is_tnc_needed, is_info_panel_visible]);
+
     const renderInfo = () => (
         <div className='db-info-panel'>
             <div data-testid='close-icon' className='db-info-panel__close-action' onClick={handleClose}>
@@ -81,7 +99,7 @@ const InfoPanel = observer(() => {
     ) : (
         <Modal
             className='statistics__modal statistics__modal--mobile'
-            is_open={is_info_panel_visible}
+            is_open={is_tour_open}
             toggleModal={handleClose}
             width={'440px'}
         >

src/pages/tutorials/dbot-tours/common/tour-start-dialog.tsx

@@ -1,7 +1,9 @@
+import React from 'react';
 import { observer } from 'mobx-react-lite';
 import Dialog from '@/components/shared_ui/dialog';
 import Text from '@/components/shared_ui/text';
 import { DBOT_TABS } from '@/constants/bot-contents';
+import useIsTNCNeeded from '@/hooks/useIsTNCNeeded';
 import { useStore } from '@/hooks/useStore';
 import { Localize, localize } from '@deriv-com/translations';
 import { useDevice } from '@deriv-com/ui';
@@ -30,6 +32,20 @@ const TourStartDialog = observer(() => {
     const onboard_tour = active_tab === DBOT_TABS.DASHBOARD;
     const tour_dialog_info = getTourDialogInfo(!isDesktop);
     const tour_dialog_action = getTourDialogAction(!isDesktop);
+    const [is_tour_open, setIsTourOpen] = React.useState(false);
+    const is_tnc_needed = useIsTNCNeeded();
+
+    React.useEffect(() => {
+        if (is_tnc_needed) {
+            setIsTourOpen(false);
+        } else {
+            if (is_tour_dialog_visible) {
+                setIsTourOpen(true);
+            } else {
+                setIsTourOpen(false);
+            }
+        }
+    }, [is_tnc_needed, is_tour_dialog_visible]);
 
     const getTourContent = () => {
         return (
@@ -70,7 +86,7 @@ const TourStartDialog = observer(() => {
     return (
         <div>
             <Dialog
-                is_visible={is_tour_dialog_visible}
+                is_visible={is_tour_open}
                 cancel_button_text={localize('Skip')}
                 onCancel={() => toggleTour()}
                 confirm_button_text={localize('Start')}

src/stores/client-store.ts

@@ -71,6 +71,7 @@ export default class ClientStore {
             setLoginId: action,
             setWebsiteStatus: action,
             setUpgradeableLandingCompanies: action,
+            updateTncStatus: action,
             is_trading_experience_incomplete: computed,
             is_cr_account: computed,
             account_open_date: computed,
@@ -273,6 +274,24 @@ export default class ClientStore {
         }
     }
 
+    updateTncStatus(landing_company_shortcode: string, status: number) {
+        try {
+            if (!this.account_settings) return;
+
+            const updated_settings = {
+                ...this.account_settings,
+                tnc_status: {
+                    ...this.account_settings.tnc_status,
+                    [landing_company_shortcode]: status,
+                },
+            };
+
+            this.setAccountSettings(updated_settings);
+        } catch (error) {
+            console.error('updateTncStatus error', error);
+        }
+    }
+
     setWebsiteStatus(status: WebsiteStatus | undefined) {
         this.website_status = status;
     }