From e57a415977d132c5299a7435f22171d11dfc068c Mon Sep 17 00:00:00 2001 From: Farabi Chowdhury Date: Wed, 2 Aug 2023 16:19:45 +0800 Subject: [PATCH 1/7] fix: removed bot too risky modal and updated stop icon --- .../bot-builder/toolbar/run-strategy.tsx | 10 ---- .../bot-builder/toolbar/toolbar.scss | 3 +- .../dashboard-component/run-strategy.tsx | 2 +- .../src/components/run-panel/run-panel.scss | 1 - .../trade-animation/trade-animation.jsx | 56 ++----------------- .../trade-animation/trade-animation.scss | 25 --------- .../bot-web-ui/src/stores/toolbar-store.ts | 6 -- .../components/icon/common/ic-bot-stop.svg | 1 + 8 files changed, 7 insertions(+), 97 deletions(-) delete mode 100644 packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/run-strategy.tsx create mode 100644 packages/components/src/components/icon/common/ic-bot-stop.svg diff --git a/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/run-strategy.tsx b/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/run-strategy.tsx deleted file mode 100644 index bef7c154a4d6..000000000000 --- a/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/run-strategy.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import TradeAnimation from 'Components/trade-animation'; - -const RunStrategy = () => ( -
- -
-); - -export default RunStrategy; diff --git a/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/toolbar.scss b/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/toolbar.scss index 52359c2b4d4d..dea20935fe24 100644 --- a/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/toolbar.scss +++ b/packages/bot-web-ui/src/components/dashboard/bot-builder/toolbar/toolbar.scss @@ -91,8 +91,7 @@ } } &__animation { - margin-right: 0.5rem; - max-width: 35rem; + width: 35rem; } &__dialog { &-text--second { diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard-component/run-strategy.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard-component/run-strategy.tsx index c985dc6662ea..bef7c154a4d6 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard-component/run-strategy.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard-component/run-strategy.tsx @@ -3,7 +3,7 @@ import TradeAnimation from 'Components/trade-animation'; const RunStrategy = () => (
- +
); diff --git a/packages/bot-web-ui/src/components/run-panel/run-panel.scss b/packages/bot-web-ui/src/components/run-panel/run-panel.scss index d654730e0395..ea10f7406930 100644 --- a/packages/bot-web-ui/src/components/run-panel/run-panel.scss +++ b/packages/bot-web-ui/src/components/run-panel/run-panel.scss @@ -166,7 +166,6 @@ height: 6rem; display: flex; width: inherit; - padding-right: 8px; } &__stop-button, &__run-button { diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx b/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx index 71de7214db6d..cbd5106b3d87 100644 --- a/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx +++ b/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx @@ -1,8 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import { Button, Icon, Modal, Text } from '@deriv/components'; -import { isMobile } from '@deriv/shared'; +import { Button, Icon } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; import ContractResultOverlay from 'Components/contract-result-overlay'; @@ -16,44 +15,6 @@ const CircularWrapper = ({ className }) => ( ); -const AnimationInfo = ({ toggleAnimationInfoModal }) => { - return ( -
- -
- ); -}; - -const AnimationInfoModal = ({ is_mobile, is_animation_info_modal_open, toggleAnimationInfoModal }) => { - return ( - - -
- - {localize( - 'Stopping the bot will prevent further trades. Any ongoing trades will be completed by our system.' - )} - - - {localize( - 'Please be aware that some completed transactions may not be displayed in the transaction table if the bot is stopped while placing trades.' - )} - - - {localize('You may refer to the statement page for details of all completed transactions.')} - -
- - - ); -}; - const ContractStageText = ({ contract_stage }) => { switch (contract_stage) { case contract_stages.NOT_RUNNING: @@ -72,8 +33,8 @@ const ContractStageText = ({ contract_stage }) => { } }; -const TradeAnimation = observer(({ className, info_direction }) => { - const { run_panel, toolbar, summary_card } = useDBotStore(); +const TradeAnimation = observer(({ className }) => { + const { run_panel, summary_card } = useDBotStore(); const { client } = useStore(); const { is_contract_completed, profit } = summary_card; const { @@ -85,7 +46,6 @@ const TradeAnimation = observer(({ className, info_direction }) => { performSelfExclusionCheck, should_show_overlay, } = run_panel; - const { is_animation_info_modal_open, toggleAnimationInfoModal } = toolbar; const { account_status } = client; const cashier_validation = account_status?.cashier_validation; @@ -127,13 +87,12 @@ const TradeAnimation = observer(({ className, info_direction }) => { return (
- {info_direction === 'left' && }
- {info_direction === 'right' && } - ); }); TradeAnimation.propTypes = { className: PropTypes.string, - info_direction: PropTypes.string, }; export default TradeAnimation; diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss index 473352517115..3c5aa2619d64 100644 --- a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss +++ b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss @@ -63,11 +63,6 @@ border-top-left-radius: 0; border-bottom-right-radius: $BORDER_RADIUS; } - &__info { - font-size: 10px; - margin: 8px; - cursor: pointer; - } // TODO: [fix-dc-bundle] Fix import issue with Deriv Component stylesheets (app should take precedence, and not repeat) &__button { width: fit-content; @@ -187,26 +182,6 @@ } } } - &__modal { - height: 28.4rem !important; - width: 44rem !important; - font-size: 1.6rem; - padding: 2.4rem; - - &--mobile { - font-size: 1.6rem !important; - } - &-body { - height: 438px; - - &--mobile { - padding: 1.6rem 0 !important; - } - &--content { - margin-top: 2rem; - } - } - } } .dc-modal__container_animation__modal { diff --git a/packages/bot-web-ui/src/stores/toolbar-store.ts b/packages/bot-web-ui/src/stores/toolbar-store.ts index e614e5286b37..dc4a8fa8ea4a 100644 --- a/packages/bot-web-ui/src/stores/toolbar-store.ts +++ b/packages/bot-web-ui/src/stores/toolbar-store.ts @@ -8,7 +8,6 @@ interface IToolbarStore { file_name: { [key: string]: string }; has_undo_stack: boolean; has_redo_stack: boolean; - toggleAnimationInfoModal: () => void; onResetClick: () => void; closeResetDialog: () => void; onResetOkButtonClick: () => void; @@ -29,7 +28,6 @@ export default class ToolbarStore implements IToolbarStore { file_name: observable, has_undo_stack: observable, has_redo_stack: observable, - toggleAnimationInfoModal: action.bound, onResetClick: action.bound, closeResetDialog: action.bound, onResetOkButtonClick: action.bound, @@ -47,10 +45,6 @@ export default class ToolbarStore implements IToolbarStore { has_undo_stack = false; has_redo_stack = false; - toggleAnimationInfoModal = (): void => { - this.is_animation_info_modal_open = !this.is_animation_info_modal_open; - }; - onResetClick = (): void => { this.is_dialog_open = true; }; diff --git a/packages/components/src/components/icon/common/ic-bot-stop.svg b/packages/components/src/components/icon/common/ic-bot-stop.svg new file mode 100644 index 000000000000..b976aecb0ac1 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-bot-stop.svg @@ -0,0 +1 @@ + \ No newline at end of file From 6d6ff184dcb38fecf811da0be4ef66bef7eca4ad Mon Sep 17 00:00:00 2001 From: Farabi Chowdhury Date: Thu, 3 Aug 2023 19:05:37 +0800 Subject: [PATCH 2/7] fix: added toast notification when user stops bot --- packages/bot-skeleton/src/scratch/dbot.js | 1 + .../dashboard/bot-stop-notification.tsx | 28 +++++++++++++++++++ .../src/components/dashboard/dashboard.scss | 14 ++++++++-- .../src/components/dashboard/dashboard.tsx | 4 +-- ...fication.tsx => strategy-notification.tsx} | 6 ++-- .../trade-animation/trade-animation.jsx | 11 +++++++- .../trade-animation/trade-animation.scss | 21 ++++++++++++++ 7 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx rename packages/bot-web-ui/src/components/dashboard/{bot-notification.tsx => strategy-notification.tsx} (92%) diff --git a/packages/bot-skeleton/src/scratch/dbot.js b/packages/bot-skeleton/src/scratch/dbot.js index 6da5fe47957b..70eb24e98462 100644 --- a/packages/bot-skeleton/src/scratch/dbot.js +++ b/packages/bot-skeleton/src/scratch/dbot.js @@ -231,6 +231,7 @@ class DBot { api_base.setIsRunning(false); if (this.interpreter) { this.interpreter.stop(); + this.interpreter.terminateSession(); } } diff --git a/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx new file mode 100644 index 000000000000..20dad94ac3fb --- /dev/null +++ b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Toast } from '@deriv/components'; +import { Localize } from '@deriv/translations'; + +const BotStopNotification = () => { + return ( +
+
+ + , + ]} + /> + +
+
+ ); +}; + +export default BotStopNotification; diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.scss b/packages/bot-web-ui/src/components/dashboard/dashboard.scss index 0662098752f4..674808040125 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.scss +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.scss @@ -675,10 +675,18 @@ position: fixed; z-index: 1; left: 0; + right: 0; bottom: 7rem; - .dc-toast__message { - background: var(--text-general); - color: var(--general-main-1); + .dc-toast { + width: 100%; + &__message { + background: var(--text-prominent); + color: var(--general-main-1); + } + } + + @include mobile { + bottom: 10rem; } } diff --git a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx index c88dbf6dd0f1..d29258b432c7 100644 --- a/packages/bot-web-ui/src/components/dashboard/dashboard.tsx +++ b/packages/bot-web-ui/src/components/dashboard/dashboard.tsx @@ -10,7 +10,6 @@ import { DBOT_TABS, TAB_IDS } from 'Constants/bot-contents'; import { useDBotStore } from 'Stores/useDBotStore'; import RunPanel from '../run-panel'; import RunStrategy from './dashboard-component/run-strategy'; -import BotNotification from './bot-notification'; import DashboardComponent from './dashboard-component'; import { DBOT_ONBOARDING, @@ -21,6 +20,7 @@ import { tour_type, } from './joyride-config'; import ReactJoyrideWrapper from './react-joyride-wrapper'; +import StrategyNotification from './strategy-notification'; import TourSlider from './tour-slider'; import TourTriggrerDialog from './tour-trigger-dialog'; import Tutorial from './tutorial-tab'; @@ -264,7 +264,7 @@ const Dashboard = observer(() => { > {dialog_options.message} - + ); }); diff --git a/packages/bot-web-ui/src/components/dashboard/bot-notification.tsx b/packages/bot-web-ui/src/components/dashboard/strategy-notification.tsx similarity index 92% rename from packages/bot-web-ui/src/components/dashboard/bot-notification.tsx rename to packages/bot-web-ui/src/components/dashboard/strategy-notification.tsx index 681418d8463c..8190d8882b18 100644 --- a/packages/bot-web-ui/src/components/dashboard/bot-notification.tsx +++ b/packages/bot-web-ui/src/components/dashboard/strategy-notification.tsx @@ -1,11 +1,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Toast } from '@deriv/components'; -import { localize } from '@deriv/translations'; import { observer } from '@deriv/stores'; +import { localize } from '@deriv/translations'; import { useDBotStore } from 'Stores/useDBotStore'; -const BotNotification = observer(() => { +const StrategyNotification = observer(() => { const { dashboard } = useDBotStore(); const { show_toast, toast_message, setOpenSettings } = dashboard; @@ -33,4 +33,4 @@ const BotNotification = observer(() => { return null; }); -export default BotNotification; +export default StrategyNotification; diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx b/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx index cbd5106b3d87..f97976cdf800 100644 --- a/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx +++ b/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx @@ -5,6 +5,7 @@ import { Button, Icon } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; import ContractResultOverlay from 'Components/contract-result-overlay'; +import BotStopNotification from 'Components/dashboard/bot-stop-notification'; import { contract_stages } from 'Constants/contract-stage'; import { useDBotStore } from 'Stores/useDBotStore'; @@ -48,9 +49,14 @@ const TradeAnimation = observer(({ className }) => { } = run_panel; const { account_status } = client; const cashier_validation = account_status?.cashier_validation; - const [is_button_disabled, updateIsButtonDisabled] = React.useState(false); const is_unavailable_for_payment_agent = cashier_validation?.includes('WithdrawServiceUnavailableForPA'); + const [show_bot_stop_message, setshowBotStopMessage] = React.useState(false); + + const handleStopBot = () => { + setshowBotStopMessage(true); + }; + // perform self-exclusion checks which will be stored under the self-exclusion-store React.useEffect(() => { performSelfExclusionCheck(); @@ -97,13 +103,16 @@ const TradeAnimation = observer(({ className }) => { updateIsButtonDisabled(true); if (is_stop_button_visible) { onStopButtonClick(); + handleStopBot(); return; } onRunButtonClick(); + setshowBotStopMessage(false); }} has_effect {...(is_stop_button_visible || !is_unavailable_for_payment_agent ? { primary: true } : { green: true })} /> + {show_bot_stop_message && }
0, diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss index 3c5aa2619d64..14bc9ca1c45e 100644 --- a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss +++ b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss @@ -189,3 +189,24 @@ width: 31.2rem !important; } } + +.bot-stop-notification { + position: fixed; + z-index: 9; + right: 38rem; + top: 12rem; + + .dc-toast { + width: 100%; + &__message { + background: var(--text-prominent); + color: var(--general-main-1); + } + } + + @include mobile { + top: unset; + right: 0; + bottom: 12rem; + } +} From fe475359d7343eb9f419b8fa2d657a9fb7706e3d Mon Sep 17 00:00:00 2001 From: Farabi Chowdhury Date: Mon, 7 Aug 2023 19:21:21 +0800 Subject: [PATCH 3/7] fix: fixed snack bar for quick strategy run --- .../src/components/trade-animation/trade-animation.jsx | 8 +------- packages/bot-web-ui/src/stores/run-panel-store.js | 8 ++++++++ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx b/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx index f97976cdf800..3db07001fece 100644 --- a/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx +++ b/packages/bot-web-ui/src/components/trade-animation/trade-animation.jsx @@ -46,16 +46,12 @@ const TradeAnimation = observer(({ className }) => { onStopButtonClick, performSelfExclusionCheck, should_show_overlay, + show_bot_stop_message, } = run_panel; const { account_status } = client; const cashier_validation = account_status?.cashier_validation; const [is_button_disabled, updateIsButtonDisabled] = React.useState(false); const is_unavailable_for_payment_agent = cashier_validation?.includes('WithdrawServiceUnavailableForPA'); - const [show_bot_stop_message, setshowBotStopMessage] = React.useState(false); - - const handleStopBot = () => { - setshowBotStopMessage(true); - }; // perform self-exclusion checks which will be stored under the self-exclusion-store React.useEffect(() => { @@ -103,11 +99,9 @@ const TradeAnimation = observer(({ className }) => { updateIsButtonDisabled(true); if (is_stop_button_visible) { onStopButtonClick(); - handleStopBot(); return; } onRunButtonClick(); - setshowBotStopMessage(false); }} has_effect {...(is_stop_button_visible || !is_unavailable_for_payment_agent ? { primary: true } : { green: true })} diff --git a/packages/bot-web-ui/src/stores/run-panel-store.js b/packages/bot-web-ui/src/stores/run-panel-store.js index ceefa006727a..43fce346e777 100644 --- a/packages/bot-web-ui/src/stores/run-panel-store.js +++ b/packages/bot-web-ui/src/stores/run-panel-store.js @@ -21,6 +21,7 @@ export default class RunPanelStore { is_sell_requested: observable, run_id: observable, error_type: observable, + show_bot_stop_message: observable, statistics: computed, is_stop_button_visible: computed, is_stop_button_disabled: computed, @@ -82,6 +83,7 @@ export default class RunPanelStore { is_drawer_open = true; is_dialog_open = false; is_sell_requested = false; + show_bot_stop_message = false; run_id = ''; @@ -141,6 +143,10 @@ export default class RunPanelStore { ); } + setShowBotStopMessage(value) { + this.show_bot_stop_message = value; + } + async performSelfExclusionCheck() { const { self_exclusion } = this.root_store; await self_exclusion.checkRestriction(); @@ -207,6 +213,7 @@ export default class RunPanelStore { this.setContractStage(contract_stages.STARTING); this.dbot.runBot(); }); + this.setShowBotStopMessage(false); } onStopButtonClick() { @@ -217,6 +224,7 @@ export default class RunPanelStore { } else { this.stopBot(); } + this.setShowBotStopMessage(true); } stopBot() { From f3e3144520a677d72b8742c368aa19a1b2e0f7a2 Mon Sep 17 00:00:00 2001 From: Farabi Chowdhury Date: Tue, 8 Aug 2023 18:23:36 +0800 Subject: [PATCH 4/7] fix: added close function on snackbar --- .../dashboard/bot-stop-notification.tsx | 19 ++++++++++++------- .../trade-animation/trade-animation.scss | 18 +++++++++++++++++- .../bot-web-ui/src/stores/run-panel-store.js | 1 + 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx index 20dad94ac3fb..eb9fa7cafc40 100644 --- a/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx +++ b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx @@ -1,12 +1,16 @@ import React from 'react'; -import { Toast } from '@deriv/components'; +import { observer } from 'mobx-react'; +import { Icon, Toast } from '@deriv/components'; import { Localize } from '@deriv/translations'; +import { useDBotStore } from 'Stores/useDBotStore'; -const BotStopNotification = () => { +const BotStopNotification = observer(() => { + const { run_panel } = useDBotStore(); + const { setShowBotStopMessage } = run_panel; return (
-
- + +
{ />, ]} /> - -
+
+ setShowBotStopMessage(false)} /> +
); -}; +}); export default BotStopNotification; diff --git a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss index 14bc9ca1c45e..5e4d246d3372 100644 --- a/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss +++ b/packages/bot-web-ui/src/components/trade-animation/trade-animation.scss @@ -201,12 +201,28 @@ &__message { background: var(--text-prominent); color: var(--general-main-1); + padding: 1rem 1.6rem; + } + &__message-content { + display: flex; + + @include mobile { + align-items: center; + } } } @include mobile { top: unset; + left: 0; right: 0; - bottom: 12rem; + bottom: 10.5rem; + } + + .notification-close { + cursor: pointer; + filter: invert(1); + margin-left: 1rem; + margin-top: 0.1rem; } } diff --git a/packages/bot-web-ui/src/stores/run-panel-store.js b/packages/bot-web-ui/src/stores/run-panel-store.js index 43fce346e777..de7482ef4881 100644 --- a/packages/bot-web-ui/src/stores/run-panel-store.js +++ b/packages/bot-web-ui/src/stores/run-panel-store.js @@ -53,6 +53,7 @@ export default class RunPanelStore { setContractStage: action.bound, setHasOpenContract: action.bound, setIsRunning: action.bound, + setShowBotStopMessage: action.bound, onMount: action.bound, onUnmount: action.bound, handleInvalidToken: action.bound, From 4fc8be4cb53f1ccc4335fdcbdd12a39076d8ca5f Mon Sep 17 00:00:00 2001 From: Farabi Chowdhury Date: Wed, 9 Aug 2023 16:18:04 +0800 Subject: [PATCH 5/7] fix: added clear and reset timeout on hovering on toast --- .../dashboard/bot-stop-notification.tsx | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx index eb9fa7cafc40..4f717abee8bf 100644 --- a/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx +++ b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { observer } from 'mobx-react'; import { Icon, Toast } from '@deriv/components'; import { Localize } from '@deriv/translations'; @@ -7,9 +7,31 @@ import { useDBotStore } from 'Stores/useDBotStore'; const BotStopNotification = observer(() => { const { run_panel } = useDBotStore(); const { setShowBotStopMessage } = run_panel; + const notification_timer = useRef(6000); + + const notificationTimer = setTimeout(() => { + if (notification_timer.current) { + setShowBotStopMessage(false); + } + }, notification_timer.current); + + const resetTimer = () => { + setTimeout(() => { + setShowBotStopMessage(false); + }, 4000); + }; + return ( -
- +
{ + clearTimeout(notificationTimer); + }} + onMouseLeave={e => { + resetTimer(); + }} + > +
Date: Thu, 10 Aug 2023 17:00:18 +0800 Subject: [PATCH 6/7] fix: added test case for bot-stop-notification --- packages/bot-skeleton/src/scratch/dbot.js | 1 - .../dashboard/bot-stop-notifiaction.spec.tsx | 101 ++++++++++++++++++ .../dashboard/bot-stop-notification.tsx | 8 +- .../bot-web-ui/src/stores/run-panel-store.js | 3 + 4 files changed, 111 insertions(+), 2 deletions(-) create mode 100644 packages/bot-web-ui/src/components/dashboard/bot-stop-notifiaction.spec.tsx diff --git a/packages/bot-skeleton/src/scratch/dbot.js b/packages/bot-skeleton/src/scratch/dbot.js index 70eb24e98462..6da5fe47957b 100644 --- a/packages/bot-skeleton/src/scratch/dbot.js +++ b/packages/bot-skeleton/src/scratch/dbot.js @@ -231,7 +231,6 @@ class DBot { api_base.setIsRunning(false); if (this.interpreter) { this.interpreter.stop(); - this.interpreter.terminateSession(); } } diff --git a/packages/bot-web-ui/src/components/dashboard/bot-stop-notifiaction.spec.tsx b/packages/bot-web-ui/src/components/dashboard/bot-stop-notifiaction.spec.tsx new file mode 100644 index 000000000000..38be3d4fbf7d --- /dev/null +++ b/packages/bot-web-ui/src/components/dashboard/bot-stop-notifiaction.spec.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import { mockStore, StoreProvider } from '@deriv/stores'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { act, fireEvent, render, screen } from '@testing-library/react'; +// eslint-disable-next-line import/no-extraneous-dependencies +import userEvent from '@testing-library/user-event'; +import RootStore from 'Stores/index'; +import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore'; +import BotStopNotification from './bot-stop-notification'; + +jest.mock('@deriv/bot-skeleton/src/scratch/blockly', () => jest.fn()); +jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => ({ + saveRecentWorkspace: jest.fn(), + unHighlightAllBlocks: jest.fn(), +})); +jest.mock('@deriv/bot-skeleton/src/scratch/hooks/block_svg', () => jest.fn()); + +const mock_ws = { + authorized: { + subscribeProposalOpenContract: jest.fn(), + send: jest.fn(), + }, + storage: { + send: jest.fn(), + }, + contractUpdate: jest.fn(), + subscribeTicksHistory: jest.fn(), + forgetStream: jest.fn(), + activeSymbols: jest.fn(), + send: jest.fn(), +}; +describe('BotStopNotification', () => { + let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element, mock_DBot_store: RootStore | undefined; + + beforeEach(() => { + jest.resetModules(); + const mock_store = mockStore({}); + mock_DBot_store = mockDBotStore(mock_store, mock_ws); + + wrapper = ({ children }: { children: JSX.Element }) => ( + + + {children} + + + ); + }); + + it('should clear the notification timer and hide message after timer expires', () => { + act(() => { + mock_DBot_store?.run_panel.setShowBotStopMessage(false); + }); + jest.useFakeTimers(); + + render(, { + wrapper, + }); + + // Advance timers to trigger notificationTimer + jest.advanceTimersByTime(6000); + + // Expect that setShowBotStopMessage(false) was called + expect(screen.queryByText('You’ve just stopped the bot.')).not.toBeInTheDocument(); + }); + + it('should render the toast component', () => { + const { container } = render(, { + wrapper, + }); + expect(container).toBeInTheDocument(); + }); + + it('should render to remove the toast component when clicking on close icon', () => { + act(() => { + mock_DBot_store?.run_panel.setShowBotStopMessage(false); + }); + + render(, { + wrapper, + }); + userEvent.click(screen.getByTestId('notification-close')); + expect(screen.queryByText('You’ve just stopped the bot.')).not.toBeInTheDocument(); + }); + + it('should render toast', () => { + act(() => { + mock_DBot_store?.run_panel.setShowBotStopMessage(true); + }); + + render(, { + wrapper, + }); + fireEvent.mouseOver(screen.getByTestId('bot-stop-notification')); + jest.advanceTimersByTime(6000); + expect(screen.queryByText('You’ve just stopped the bot.')).not.toBeInTheDocument(); + + fireEvent.mouseLeave(screen.getByTestId('bot-stop-notification')); + jest.advanceTimersByTime(4000); + expect(screen.queryByText('You’ve just stopped the bot.')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx index 4f717abee8bf..fb9821a26748 100644 --- a/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx +++ b/packages/bot-web-ui/src/components/dashboard/bot-stop-notification.tsx @@ -30,6 +30,7 @@ const BotStopNotification = observer(() => { onMouseLeave={e => { resetTimer(); }} + data-testid='bot-stop-notification' >
@@ -46,7 +47,12 @@ const BotStopNotification = observer(() => { ]} />
- setShowBotStopMessage(false)} /> + setShowBotStopMessage(false)} + />
); diff --git a/packages/bot-web-ui/src/stores/run-panel-store.js b/packages/bot-web-ui/src/stores/run-panel-store.js index de7482ef4881..3ea9d647344d 100644 --- a/packages/bot-web-ui/src/stores/run-panel-store.js +++ b/packages/bot-web-ui/src/stores/run-panel-store.js @@ -219,11 +219,14 @@ export default class RunPanelStore { onStopButtonClick() { const { is_multiplier } = this.root_store.summary_card; + const { summary_card } = this.root_store; if (is_multiplier) { this.showStopMultiplierContractDialog(); } else { this.stopBot(); + this.dbot.terminateBot(); + summary_card.clear(); } this.setShowBotStopMessage(true); } From 1096639cd86e02a77eff88118f17dcdb55b28879 Mon Sep 17 00:00:00 2001 From: Farabi Chowdhury Date: Fri, 11 Aug 2023 17:33:08 +0800 Subject: [PATCH 7/7] fix: stop bot snack bar appearing with no trade again --- packages/bot-web-ui/src/stores/run-panel-store.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bot-web-ui/src/stores/run-panel-store.js b/packages/bot-web-ui/src/stores/run-panel-store.js index 3ea9d647344d..1923f7132edd 100644 --- a/packages/bot-web-ui/src/stores/run-panel-store.js +++ b/packages/bot-web-ui/src/stores/run-panel-store.js @@ -227,8 +227,8 @@ export default class RunPanelStore { this.stopBot(); this.dbot.terminateBot(); summary_card.clear(); + this.setShowBotStopMessage(true); } - this.setShowBotStopMessage(true); } stopBot() { @@ -565,7 +565,7 @@ export default class RunPanelStore { onBotTradeAgain(is_trade_again) { if (!is_trade_again) { - this.onStopButtonClick(); + this.stopBot(); } }