From 583bf0673c3885ec8b4d419b888e3784f6092d05 Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Tue, 8 Apr 2025 13:10:36 +0800 Subject: [PATCH 1/6] fix: removed modal overlap caused due to rendering of both tnc and welcome tour modal simultaneously --- .../tnc-status-update-modal/tnc-status-update-modal.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx index 9298c76b..98d54ad5 100644 --- a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx +++ b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx @@ -12,17 +12,20 @@ import './tnc-status-update-modal.scss'; const TncStatusUpdateModal: React.FC = observer(() => { const { isAuthorized } = useApiBase(); - const { client } = useStore(); + const { client, dashboard } = useStore(); + const { is_tour_dialog_visible } = dashboard; const { is_cr_account } = client; const [is_tnc_open, setIsTncOpen] = React.useState(false); const { isDesktop } = useDevice(); const is_tnc_needed = useIsTNCNeeded(); React.useEffect(() => { - if (is_tnc_needed) { + if (true && !is_tour_dialog_visible) { setIsTncOpen(true); + } else { + setIsTncOpen(false); } - }, [is_tnc_needed]); + }, [is_tnc_needed, is_tour_dialog_visible]); const onClick = async () => { if (isAuthorized) { From 5bb9dbb95f66b6852d7687f4a656ecd4206ce214 Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Tue, 8 Apr 2025 14:14:26 +0800 Subject: [PATCH 2/6] fix: removed test condition --- .../tnc-status-update-modal/tnc-status-update-modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx index 98d54ad5..3db3fea4 100644 --- a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx +++ b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx @@ -20,7 +20,7 @@ const TncStatusUpdateModal: React.FC = observer(() => { const is_tnc_needed = useIsTNCNeeded(); React.useEffect(() => { - if (true && !is_tour_dialog_visible) { + if (is_tnc_needed && !is_tour_dialog_visible) { setIsTncOpen(true); } else { setIsTncOpen(false); From ee60b57965f783e19019a5ff2ab52d68b97cc382 Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Thu, 10 Apr 2025 14:49:11 +0800 Subject: [PATCH 3/6] fix: temporarily set modal to always display for testing --- .../tnc-status-update-modal/tnc-status-update-modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx index 3db3fea4..98d54ad5 100644 --- a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx +++ b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx @@ -20,7 +20,7 @@ const TncStatusUpdateModal: React.FC = observer(() => { const is_tnc_needed = useIsTNCNeeded(); React.useEffect(() => { - if (is_tnc_needed && !is_tour_dialog_visible) { + if (true && !is_tour_dialog_visible) { setIsTncOpen(true); } else { setIsTncOpen(false); From 00d04d826248d081678c548339c082b39a225d65 Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Fri, 11 Apr 2025 16:33:33 +0800 Subject: [PATCH 4/6] fix: updated load order to view tnc before welcome message --- .../tnc-status-update-modal.tsx | 7 +++---- .../dbot-tours/common/tour-start-dialog.tsx | 18 +++++++++++++++++- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx index 98d54ad5..9837b796 100644 --- a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx +++ b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx @@ -12,20 +12,19 @@ import './tnc-status-update-modal.scss'; const TncStatusUpdateModal: React.FC = observer(() => { const { isAuthorized } = useApiBase(); - const { client, dashboard } = useStore(); - const { is_tour_dialog_visible } = dashboard; + const { client } = useStore(); const { is_cr_account } = client; const [is_tnc_open, setIsTncOpen] = React.useState(false); const { isDesktop } = useDevice(); const is_tnc_needed = useIsTNCNeeded(); React.useEffect(() => { - if (true && !is_tour_dialog_visible) { + if (is_tnc_needed) { setIsTncOpen(true); } else { setIsTncOpen(false); } - }, [is_tnc_needed, is_tour_dialog_visible]); + }, [is_tnc_needed]); const onClick = async () => { if (isAuthorized) { diff --git a/src/pages/tutorials/dbot-tours/common/tour-start-dialog.tsx b/src/pages/tutorials/dbot-tours/common/tour-start-dialog.tsx index 6f5f3c86..d9401c3b 100644 --- a/src/pages/tutorials/dbot-tours/common/tour-start-dialog.tsx +++ b/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 (
toggleTour()} confirm_button_text={localize('Start')} From 29feca8867d5e6979a6068f1fd31e6f7192b40f5 Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Thu, 17 Apr 2025 13:32:58 +0800 Subject: [PATCH 5/6] fix: Added conditions to manually update the store on dismiss --- .../tnc-status-update-modal.tsx | 3 +++ src/stores/client-store.ts | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx index 9837b796..3528b90c 100644 --- a/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx +++ b/src/components/tnc-status-update-modal/tnc-status-update-modal.tsx @@ -29,6 +29,9 @@ const TncStatusUpdateModal: React.FC = observer(() => { 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); } }; diff --git a/src/stores/client-store.ts b/src/stores/client-store.ts index 24fb1128..1f28de44 100644 --- a/src/stores/client-store.ts +++ b/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; } From 664f8d587dee2d37019e90d55ccc0272759b895d Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Thu, 17 Apr 2025 15:17:13 +0800 Subject: [PATCH 6/6] fix: added checks for mobile view --- src/pages/dashboard/info-panel.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/pages/dashboard/info-panel.tsx b/src/pages/dashboard/info-panel.tsx index b85d5ecc..a90de376 100644 --- a/src/pages/dashboard/info-panel.tsx +++ b/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 = () => (
@@ -81,7 +99,7 @@ const InfoPanel = observer(() => { ) : (