From d00c0725074b9ab34e62ecf3d42cd93bd2414b2f Mon Sep 17 00:00:00 2001 From: Nada Date: Mon, 30 Oct 2023 15:32:46 +0400 Subject: [PATCH 01/13] feat: disclaimer modal for p2p users --- .../src/components/icon/common/ic-warning.svg | 1 + .../components/src/components/icon/icons.js | 1 + packages/components/stories/icon/icons.js | 3 + packages/p2p/src/components/app-content.jsx | 71 ++++++++++------ .../__tests__/disclaimer-modal.spec.tsx | 69 ++++++++++++++++ .../disclaimer-modal/disclaimer-modal.scss | 38 +++++++++ .../disclaimer-modal/disclaimer-modal.tsx | 81 +++++++++++++++++++ .../modals/disclaimer-modal/index.ts | 4 + packages/p2p/src/constants/modals.js | 3 + packages/p2p/src/utils/date-time.js | 10 +++ 10 files changed, 256 insertions(+), 25 deletions(-) create mode 100644 packages/components/src/components/icon/common/ic-warning.svg create mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx create mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss create mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx create mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/index.ts diff --git a/packages/components/src/components/icon/common/ic-warning.svg b/packages/components/src/components/icon/common/ic-warning.svg new file mode 100644 index 000000000000..3a637276f87e --- /dev/null +++ b/packages/components/src/components/icon/common/ic-warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index 3ba72c9af31a..f43bb8d4967b 100644 --- a/packages/components/src/components/icon/icons.js +++ b/packages/components/src/components/icon/icons.js @@ -606,6 +606,7 @@ import './common/ic-verification-success.svg'; import './common/ic-verification.svg'; import './common/ic-visa-dark.svg'; import './common/ic-visa-light.svg'; +import './common/ic-warning.svg'; import './common/ic-web-money-dark.svg'; import './common/ic-web-money-light.svg'; import './common/ic-web-terminal.svg'; diff --git a/packages/components/stories/icon/icons.js b/packages/components/stories/icon/icons.js index 7bd59c50adb7..9585398fb573 100644 --- a/packages/components/stories/icon/icons.js +++ b/packages/components/stories/icon/icons.js @@ -543,6 +543,7 @@ export const icons = 'IcPooSubmitted', 'IcPooVerified', 'IcPortfolio', + 'IcPositionClosed', 'IcPreviewIcon', 'IcPreview', 'IcProfile', @@ -614,6 +615,7 @@ export const icons = 'IcVerification', 'IcVisaDark', 'IcVisaLight', + 'IcWarning', 'IcWebMoneyDark', 'IcWebMoneyLight', 'IcWebTerminal', @@ -702,6 +704,7 @@ export const icons = 'IcFlagPt', 'IcFlagRu', 'IcFlagTh', + 'IcFlagTr', 'IcFlagUk', 'IcFlagVi', 'IcFlagZhCn', diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx index ec7aceb8e9cf..9fd8713a45d1 100644 --- a/packages/p2p/src/components/app-content.jsx +++ b/packages/p2p/src/components/app-content.jsx @@ -13,18 +13,36 @@ import { useModalManagerContext } from 'Components/modal-manager/modal-manager-c import TemporarilyBarredHint from 'Components/temporarily-barred-hint'; import { buy_sell } from 'Constants/buy-sell'; import { useStores } from 'Stores'; - +import { getHoursDifference } from 'Utils/date-time'; import { localize } from './i18next'; const AppContent = ({ order_id }) => { const { buy_sell_store, general_store } = useStores(); const { showModal, hideModal } = useModalManagerContext(); + let interval; const { notifications: { setP2POrderProps }, + client: { loginid }, } = useStore(); const notification_count = useP2PNotificationCount(); const history = useHistory(); + // Check if it has been 24 hours since the user last saw the disclaimer modal + const checkShowDisclaimerModal = () => { + if (!(getHoursDifference(localStorage.getItem(`${loginid}_disclaimer_shown`)) < 24)) { + showModal({ key: 'DisclaimerModal' }); + } + }; + + React.useEffect(() => { + checkShowDisclaimerModal(); + interval = setInterval(() => { + checkShowDisclaimerModal(); + // checks whether to show the disclaimer modal every hour + }, 3600000); + return () => clearInterval(interval); + }, []); + React.useEffect(() => { buy_sell_store.setTableType(buy_sell.BUY); return reaction( @@ -61,30 +79,33 @@ const AppContent = ({ order_id }) => { } return ( - { - general_store.handleTabClick(active_tab_index); - history.push({ - pathname: general_store.active_tab_route, - }); - }} - top - > -
- -
-
-
- -
-
- + <> + {/*
*/} + { + general_store.handleTabClick(active_tab_index); + history.push({ + pathname: general_store.active_tab_route, + }); + }} + top + > +
+ +
+
+
+ +
+
+ + ); }; diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx new file mode 100644 index 000000000000..b268c76b14b2 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { getByText, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import DisclaimerModal from '../disclaimer-modal'; +import { StoreProvider, mockStore } from '@deriv/stores'; + +const mock_modal_manager_context = { + hideModal: jest.fn(), + is_modal_open: true, + showModal: jest.fn(), +}; + +const mock = { + client: { + loginid: 'MX12345', + }, + ui: { + is_mobile: false, + }, +}; + +jest.mock('Components/modal-manager/modal-manager-context', () => ({ + useModalManagerContext: () => mock_modal_manager_context, +})); + +describe('DisclaimerModal', () => { + let modal_root_el: HTMLElement; + beforeAll(() => { + modal_root_el = document.createElement('div'); + modal_root_el.setAttribute('id', 'modal_root'); + document.body.appendChild(modal_root_el); + Object.defineProperty(window, 'localStorage', { + value: { + setItem: jest.fn(), + }, + }); + }); + + afterAll(() => { + document.body.removeChild(modal_root_el); + }); + + const wrapper = ({ children }: { children: JSX.Element }) => ( + {children} + ); + + it('should render the modal with the correct title and content', () => { + render(, { wrapper }); + expect(screen.getByText('For your safety:')).toBeInTheDocument(); + }); + + it('should disable button when checkbox is not clicked', () => { + render(, { wrapper }); + expect(screen.getByRole('button', { name: 'Confirm' })).toBeDisabled(); + }); + + it('should enable button when checkbox is clicked', () => { + render(, { wrapper }); + userEvent.click(screen.getByRole('checkbox', { name: 'I’ve read and understood the above reminder.' })); + expect(screen.getByRole('button', { name: 'Confirm' })).toBeEnabled(); + }); + + it('should set value in local storage when confirm button is clicked', () => { + render(, { wrapper }); + userEvent.click(screen.getByRole('checkbox', { name: 'I’ve read and understood the above reminder.' })); + userEvent.click(screen.getByRole('button', { name: 'Confirm' })); + expect(localStorage.setItem).toHaveBeenCalledWith('MX12345_disclaimer_shown', expect.any(String)); + }); +}); diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss new file mode 100644 index 000000000000..3e330e778c6f --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss @@ -0,0 +1,38 @@ +.dc-modal { + &__container_disclaimer-modal { + display: flex; + align-items: center; + justify-content: center; + + .disclaimer-modal { + &__body { + padding-bottom: 0rem; + &-title { + display: flex; + flex-direction: column; + align-items: center; + } + + &-icon { + margin: 1.6rem 0; + } + + &-bullets { + margin-bottom: 1.6rem; + & > ul { + padding-left: 2rem; + list-style-type: disc; + } + } + + .dc-checkbox__box { + margin-left: 0; + } + } + } + } + + &-footer { + align-self: end; + } +} diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx new file mode 100644 index 000000000000..e3d54495f3cf --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { Button, Checkbox, Icon, Modal, Text } from '@deriv/components'; +import { useStore } from '@deriv/stores'; +import { Localize } from 'Components/i18next'; +import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; + +const DisclaimerModal = () => { + const [is_checked, setIsChecked] = React.useState(false); + const { hideModal, is_modal_open } = useModalManagerContext(); + const { client, ui } = useStore(); + const { loginid } = client; + const { is_mobile } = ui; + + const onClickConfirm = () => { + const current_date = new Date().toISOString(); + localStorage.setItem(`${loginid}_disclaimer_shown`, current_date); + hideModal(); + }; + + return ( + + + +
+ + + + +
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + setIsChecked(!is_checked)} + name='disclaimer-checkbox' + value={is_checked} + label={ + + + + } + /> + + + + + + + ); +}; + +export default DisclaimerModal; diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/index.ts b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/index.ts new file mode 100644 index 000000000000..36dd4accee62 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/index.ts @@ -0,0 +1,4 @@ +import DisclaimerModal from './disclaimer-modal'; +import './disclaimer-modal.scss'; + +export default DisclaimerModal; diff --git a/packages/p2p/src/constants/modals.js b/packages/p2p/src/constants/modals.js index 3a6b679e3aab..6f25e1710273 100644 --- a/packages/p2p/src/constants/modals.js +++ b/packages/p2p/src/constants/modals.js @@ -55,6 +55,9 @@ export const modals = { /* webpackChunkName: "delete-payment-method-error-modal" */ 'Components/modal-manager/modals/delete-payment-method-error-modal' ) ), + DisclaimerModal: React.lazy(() => + import(/* webpackChunkName: "disclaimer-modal" */ 'Components/modal-manager/modals/disclaimer-modal') + ), EditAdCancelModal: React.lazy(() => import(/* webpackChunkName: "edit-ad-cancel-modal" */ 'Components/modal-manager/modals/edit-ad-cancel-modal') ), diff --git a/packages/p2p/src/utils/date-time.js b/packages/p2p/src/utils/date-time.js index 4cc7d0e46baf..7f30bee86fdb 100644 --- a/packages/p2p/src/utils/date-time.js +++ b/packages/p2p/src/utils/date-time.js @@ -50,3 +50,13 @@ export const secondsToTimer = distance => { return `${toDoubleDigits(hours)}:${toDoubleDigits(minutes)}:${toDoubleDigits(seconds)}`; }; + +// The function below returns the time difference in hours between the current time and the time set +export const getHoursDifference = time_set => { + if (!time_set) return undefined; + const current_time = new Date(); + const updated_time = new Date(time_set); + const difference = current_time.getTime() - updated_time.getTime(); + const hours_difference = Math.floor(difference / 1000 / 60); + return hours_difference; +}; From 20d2b903b71963091781a446346cb7c493f81a59 Mon Sep 17 00:00:00 2001 From: Nada Date: Mon, 30 Oct 2023 15:43:58 +0400 Subject: [PATCH 02/13] fix: remove unused change --- packages/p2p/src/components/app-content.jsx | 51 +++++++++---------- .../__tests__/disclaimer-modal.spec.tsx | 4 +- 2 files changed, 26 insertions(+), 29 deletions(-) diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx index 9fd8713a45d1..f7f4f593feb0 100644 --- a/packages/p2p/src/components/app-content.jsx +++ b/packages/p2p/src/components/app-content.jsx @@ -79,33 +79,30 @@ const AppContent = ({ order_id }) => { } return ( - <> - {/*
*/} - { - general_store.handleTabClick(active_tab_index); - history.push({ - pathname: general_store.active_tab_route, - }); - }} - top - > -
- -
-
-
- -
-
- - + { + general_store.handleTabClick(active_tab_index); + history.push({ + pathname: general_store.active_tab_route, + }); + }} + top + > +
+ +
+
+
+ +
+
+ ); }; diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx index b268c76b14b2..2da5879a37ec 100644 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { getByText, render, screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import DisclaimerModal from '../disclaimer-modal'; import { StoreProvider, mockStore } from '@deriv/stores'; +import DisclaimerModal from '../disclaimer-modal'; const mock_modal_manager_context = { hideModal: jest.fn(), From 837a717a9d39d3e0a7b18d48484d76d2718453d9 Mon Sep 17 00:00:00 2001 From: Nada Date: Tue, 31 Oct 2023 13:26:52 +0400 Subject: [PATCH 03/13] fix: pr review comments --- .../disclaimer-modal/disclaimer-modal.scss | 32 ++++--- .../disclaimer-modal/disclaimer-modal.tsx | 89 +++++++++++-------- packages/p2p/src/utils/date-time.js | 7 +- 3 files changed, 73 insertions(+), 55 deletions(-) diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss index 3e330e778c6f..2594c1497fed 100644 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss @@ -1,28 +1,16 @@ .dc-modal { &__container_disclaimer-modal { - display: flex; - align-items: center; - justify-content: center; - .disclaimer-modal { &__body { - padding-bottom: 0rem; - &-title { - display: flex; - flex-direction: column; - align-items: center; - } + padding: 0 2.4rem; &-icon { - margin: 1.6rem 0; + margin: 1.6rem auto; } - &-bullets { - margin-bottom: 1.6rem; - & > ul { - padding-left: 2rem; - list-style-type: disc; - } + &-list { + list-style-type: disc; + padding-left: 2rem; } .dc-checkbox__box { @@ -30,6 +18,16 @@ } } } + .dc-modal-header { + &__title { + display: flex; + flex-direction: column; + padding-bottom: 0; + } + @include mobile { + height: 15rem; + } + } } &-footer { diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx index e3d54495f3cf..85c246bcf1c8 100644 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx @@ -4,6 +4,41 @@ import { useStore } from '@deriv/stores'; import { Localize } from 'Components/i18next'; import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; +const ModalTitle = () => { + const { ui } = useStore(); + const { is_mobile } = ui; + return ( + + + + + + + ); +}; +const getDislaimerStatements = () => [ + , + , + , + , + , +]; + const DisclaimerModal = () => { const [is_checked, setIsChecked] = React.useState(false); const { hideModal, is_modal_open } = useModalManagerContext(); @@ -18,47 +53,27 @@ const DisclaimerModal = () => { }; return ( - + } + is_title_centered + > -
- - - - -
- -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - +
      + {getDislaimerStatements().map((statement, idx) => ( +
    • + + {statement} +
      • -
    - + ))} +
setIsChecked(!is_checked)} + onChange={() => setIsChecked(prev_state => !prev_state)} name='disclaimer-checkbox' value={is_checked} label={ diff --git a/packages/p2p/src/utils/date-time.js b/packages/p2p/src/utils/date-time.js index 7f30bee86fdb..47012cc5a832 100644 --- a/packages/p2p/src/utils/date-time.js +++ b/packages/p2p/src/utils/date-time.js @@ -51,7 +51,12 @@ export const secondsToTimer = distance => { return `${toDoubleDigits(hours)}:${toDoubleDigits(minutes)}:${toDoubleDigits(seconds)}`; }; -// The function below returns the time difference in hours between the current time and the time set +/** + * Calculate the difference in hours between the current time and a given time. + * + * @param {string} time_set - The time to compare against. + * @returns {number|undefined} The difference in hours between the current time and the given time. Returns `undefined` if the input is invalid. + */ export const getHoursDifference = time_set => { if (!time_set) return undefined; const current_time = new Date(); From f23a3dbdd425d79ee6939d60330662a421ce01c0 Mon Sep 17 00:00:00 2001 From: Nada Date: Tue, 31 Oct 2023 14:56:44 +0400 Subject: [PATCH 04/13] fix: removed wrapper --- .../disclaimer-modal/disclaimer-modal.tsx | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx index 85c246bcf1c8..dc222aca8e7d 100644 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx +++ b/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx @@ -22,7 +22,7 @@ const ModalTitle = () => { ); }; -const getDislaimerStatements = () => [ +const disclaimer_statements = [ [ ]; const DisclaimerModal = () => { - const [is_checked, setIsChecked] = React.useState(false); + const [is_checked, setIsChecked] = React.useState(false); const { hideModal, is_modal_open } = useModalManagerContext(); const { client, ui } = useStore(); const { loginid } = client; @@ -62,27 +62,25 @@ const DisclaimerModal = () => { is_title_centered > - -
    - {getDislaimerStatements().map((statement, idx) => ( -
  • - - {statement} - -
    • - ))} -
- setIsChecked(prev_state => !prev_state)} - name='disclaimer-checkbox' - value={is_checked} - label={ +
    + {disclaimer_statements.map((statement, idx) => ( +
  • - + {statement} - } - /> - +
    • + ))} +
+ setIsChecked(prev_state => !prev_state)} + name='disclaimer-checkbox' + value={is_checked} + label={ + + + + } + /> From 810a38260fed1e01c6ffe88e2d8ec21e40bdbaa8 Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 16 Nov 2023 10:06:27 +0400 Subject: [PATCH 11/13] fix: disclaimer interval set to 1 hour --- packages/p2p/src/components/app-content.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx index 334f59f3a99d..1a90e5612f6b 100644 --- a/packages/p2p/src/components/app-content.jsx +++ b/packages/p2p/src/components/app-content.jsx @@ -30,11 +30,11 @@ const AppContent = ({ order_id }) => { timeout = setTimeout(() => { showModal({ key: 'DisclaimerModal', props: { handleDisclaimerTimeout } }); // Display the disclaimer modal again after 24 hours - }, (24 - time_lapsed) * 3600000); + }, (1 - time_lapsed) * 3600000); }; React.useEffect(() => { - if(!general_store.should_show_dp2p_blocked){ + if (!general_store.should_show_dp2p_blocked) { const time_lapsed = getHoursDifference(localStorage.getItem(`p2p_${loginid}_disclaimer_shown`)); if (time_lapsed === undefined || time_lapsed > 24) { showModal({ key: 'DisclaimerModal', props: { handleDisclaimerTimeout } }); From 2de71a70371204398bfe31b6154bb3e0359cb4dd Mon Sep 17 00:00:00 2001 From: Nada Date: Thu, 16 Nov 2023 16:43:13 +0400 Subject: [PATCH 12/13] fix: change time to 1 hour for testing --- packages/p2p/src/components/app-content.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx index 1a90e5612f6b..d23a83152f25 100644 --- a/packages/p2p/src/components/app-content.jsx +++ b/packages/p2p/src/components/app-content.jsx @@ -36,7 +36,7 @@ const AppContent = ({ order_id }) => { React.useEffect(() => { if (!general_store.should_show_dp2p_blocked) { const time_lapsed = getHoursDifference(localStorage.getItem(`p2p_${loginid}_disclaimer_shown`)); - if (time_lapsed === undefined || time_lapsed > 24) { + if (time_lapsed === undefined || time_lapsed > 1) { showModal({ key: 'DisclaimerModal', props: { handleDisclaimerTimeout } }); } else { handleDisclaimerTimeout(time_lapsed); From 6f8cbe2d921dba08ec6b844b55eb7907147e975b Mon Sep 17 00:00:00 2001 From: Nada Date: Fri, 17 Nov 2023 09:17:27 +0400 Subject: [PATCH 13/13] fix: changed interval duration back to 24 hours --- packages/p2p/src/components/app-content.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx index d23a83152f25..a54ccbd2e76c 100644 --- a/packages/p2p/src/components/app-content.jsx +++ b/packages/p2p/src/components/app-content.jsx @@ -15,6 +15,8 @@ import { useStores } from 'Stores'; import { getHoursDifference } from 'Utils/date-time'; import { localize } from './i18next'; +const INTERVAL_DURATION = 24; // 24 hours + const AppContent = ({ order_id }) => { const { buy_sell_store, general_store } = useStores(); const { showModal, hideModal } = useModalManagerContext(); @@ -30,13 +32,13 @@ const AppContent = ({ order_id }) => { timeout = setTimeout(() => { showModal({ key: 'DisclaimerModal', props: { handleDisclaimerTimeout } }); // Display the disclaimer modal again after 24 hours - }, (1 - time_lapsed) * 3600000); + }, (INTERVAL_DURATION - time_lapsed) * 3600000); }; React.useEffect(() => { if (!general_store.should_show_dp2p_blocked) { const time_lapsed = getHoursDifference(localStorage.getItem(`p2p_${loginid}_disclaimer_shown`)); - if (time_lapsed === undefined || time_lapsed > 1) { + if (time_lapsed === undefined || time_lapsed > INTERVAL_DURATION) { showModal({ key: 'DisclaimerModal', props: { handleDisclaimerTimeout } }); } else { handleDisclaimerTimeout(time_lapsed);