From 9bd27670f9fcd3132fd815d2b71ae991d97e6b6d Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Thu, 9 May 2024 13:57:15 +0400 Subject: [PATCH] fix: remove disclaimer modal --- packages/p2p/src/components/app-content.jsx | 31 ------ .../__tests__/disclaimer-modal.spec.tsx | 74 ------------- .../disclaimer-modal/disclaimer-modal.scss | 33 ------ .../disclaimer-modal/disclaimer-modal.tsx | 103 ------------------ .../modals/disclaimer-modal/index.ts | 4 - packages/p2p/src/constants/modals.ts | 3 - packages/p2p/src/utils/date-time.ts | 15 --- 7 files changed, 263 deletions(-) delete mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx delete mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss delete mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx delete mode 100644 packages/p2p/src/components/modal-manager/modals/disclaimer-modal/index.ts diff --git a/packages/p2p/src/components/app-content.jsx b/packages/p2p/src/components/app-content.jsx index 6e2ea345b15f..4792e0251191 100644 --- a/packages/p2p/src/components/app-content.jsx +++ b/packages/p2p/src/components/app-content.jsx @@ -12,49 +12,18 @@ 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 INTERVAL_DURATION = 24; // 24 hours - const AppContent = ({ order_id }) => { const { buy_sell_store, general_store } = useStores(); const { showModal, hideModal } = useModalManagerContext(); - let timeout; const { notifications: { setP2POrderProps }, - client: { loginid }, } = useStore(); const notification_count = useP2PNotificationCount(); const is_system_maintenance = useIsSystemMaintenance(); const history = useHistory(); - const handleDisclaimerTimeout = time_lapsed => { - timeout = setTimeout(() => { - showModal({ key: 'DisclaimerModal', props: { handleDisclaimerTimeout } }); - // Display the disclaimer modal again after 24 hours - }, (INTERVAL_DURATION - time_lapsed) * 3600000); - }; - - React.useEffect(() => { - if ( - !general_store.should_show_dp2p_blocked && - !is_system_maintenance && - !general_store.counterparty_advert_id - ) { - const time_lapsed = getHoursDifference(localStorage.getItem(`p2p_${loginid}_disclaimer_shown`)); - if (time_lapsed === undefined || time_lapsed > INTERVAL_DURATION) { - showModal({ key: 'DisclaimerModal', props: { handleDisclaimerTimeout } }); - } else { - handleDisclaimerTimeout(time_lapsed); - } - } - - return () => { - clearTimeout(timeout); - }; - }, []); - React.useEffect(() => { buy_sell_store.setTableType(buy_sell.BUY); return reaction( 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 deleted file mode 100644 index efe335161e2e..000000000000 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/__tests__/disclaimer-modal.spec.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import { StoreProvider, mockStore } from '@deriv/stores'; -import DisclaimerModal from '../disclaimer-modal'; - -const mock_modal_manager_context = { - hideModal: jest.fn(), - is_modal_open: true, - showModal: jest.fn(), -}; - -const mock = { - client: { - loginid: 'MX12345', - }, - ui: { - is_mobile: false, - }, -}; - -const handleDisclaimerTimeout = jest.fn(); - -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: { - getItem: jest.fn(), - 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('p2p_MX12345_disclaimer_shown', expect.any(String)); - expect(handleDisclaimerTimeout).toHaveBeenCalledWith(0); - expect(mock_modal_manager_context.hideModal).toHaveBeenCalled(); - }); -}); 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 deleted file mode 100644 index a7122e0dbce4..000000000000 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.scss +++ /dev/null @@ -1,33 +0,0 @@ -.dc-modal { - &__container_disclaimer-modal { - .disclaimer-modal { - &__body { - padding: 0 2.4rem; - - &-icon { - margin: 1.6rem auto; - } - - &-list { - list-style-type: disc; - padding-inline-start: 2rem; - margin-bottom: 1.6rem; - } - - .dc-checkbox__box { - margin-inline-start: 0; - } - } - } - .dc-modal-header { - &__title { - display: flex; - flex-direction: column; - padding-bottom: 0; - } - @include mobile { - height: 15rem; - } - } - } -} 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 deleted file mode 100644 index 01ff19410cf7..000000000000 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/disclaimer-modal.tsx +++ /dev/null @@ -1,103 +0,0 @@ -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 ModalTitle = () => { - const { ui } = useStore(); - const { is_mobile } = ui; - return ( - - - - - - - ); -}; -const disclaimer_statements = [ - , - , - , - , - , -]; - -type TDisclaimerModalProps = { - handleDisclaimerTimeout: (time_left: number) => void; -}; - -const DisclaimerModal = ({ handleDisclaimerTimeout }: TDisclaimerModalProps) => { - 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(`p2p_${loginid}_disclaimer_shown`, current_date); - hideModal(); - handleDisclaimerTimeout(0); - }; - - const onToggleCheckbox = React.useCallback(() => { - setIsChecked(prev_state => !prev_state); - }, []); - - return ( - } - is_title_centered - > - -
    - {disclaimer_statements.map((statement, idx) => ( -
  • - - {statement} - -
    • - ))} -
- - - - } - /> - - - - - - ); -}; - -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 deleted file mode 100644 index 36dd4accee62..000000000000 --- a/packages/p2p/src/components/modal-manager/modals/disclaimer-modal/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import DisclaimerModal from './disclaimer-modal'; -import './disclaimer-modal.scss'; - -export default DisclaimerModal; diff --git a/packages/p2p/src/constants/modals.ts b/packages/p2p/src/constants/modals.ts index 415644725c85..04a99c203a23 100644 --- a/packages/p2p/src/constants/modals.ts +++ b/packages/p2p/src/constants/modals.ts @@ -91,9 +91,6 @@ 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') - ), EmailLinkBlockedModal: React.lazy( () => import( diff --git a/packages/p2p/src/utils/date-time.ts b/packages/p2p/src/utils/date-time.ts index ef4e40bd29ae..64dbd4f74422 100644 --- a/packages/p2p/src/utils/date-time.ts +++ b/packages/p2p/src/utils/date-time.ts @@ -77,18 +77,3 @@ export const millisecondsToTimer = (distance: number): string => { return `${toDoubleDigits(hours)}:${toDoubleDigits(minutes)}:${toDoubleDigits(seconds)}`; }; - -/** - * 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: string): number | undefined => { - 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 / 60); - return hours_difference; -};