From 16d8abd7eeb179cecec63af0fc0743ae8973ce2d Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Fri, 17 Nov 2023 16:54:19 +0800 Subject: [PATCH 1/3] chore: removed responsive root --- packages/wallets/src/AppContent.tsx | 1 - .../Base/ModalStepWrapper/ModalStepWrapper.scss | 2 +- .../components/ModalProvider/ModalProvider.scss | 16 ++++++++++++++++ .../components/ModalProvider/ModalProvider.tsx | 6 ++---- .../TransactionsPendingRow.tsx | 6 ++---- .../TransactionsPendingRowField.tsx | 3 +-- 6 files changed, 22 insertions(+), 12 deletions(-) create mode 100644 packages/wallets/src/components/ModalProvider/ModalProvider.scss diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx index cf0140ad99e2..0060405d900e 100644 --- a/packages/wallets/src/AppContent.tsx +++ b/packages/wallets/src/AppContent.tsx @@ -5,7 +5,6 @@ import './AppContent.scss'; const AppContent: React.FC = () => { return (
-
); diff --git a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss index b91ea7de64f1..b0fc69bcf183 100644 --- a/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss +++ b/packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss @@ -3,7 +3,7 @@ border-radius: 0.8rem; @include mobile { - height: calc(100vh - 4rem); + height: 100vh; width: 100vw; margin: 0; border-radius: 0; diff --git a/packages/wallets/src/components/ModalProvider/ModalProvider.scss b/packages/wallets/src/components/ModalProvider/ModalProvider.scss new file mode 100644 index 000000000000..e2146b184b4a --- /dev/null +++ b/packages/wallets/src/components/ModalProvider/ModalProvider.scss @@ -0,0 +1,16 @@ +.wallets-modal { + transform: scale(1); + opacity: 1; + animation: mount 0.25s ease-out; +} + +@keyframes mount { + from { + transform: scale(0); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } +} diff --git a/packages/wallets/src/components/ModalProvider/ModalProvider.tsx b/packages/wallets/src/components/ModalProvider/ModalProvider.tsx index 09ccca7e9586..e8bbb823206e 100644 --- a/packages/wallets/src/components/ModalProvider/ModalProvider.tsx +++ b/packages/wallets/src/components/ModalProvider/ModalProvider.tsx @@ -19,7 +19,6 @@ type TModalContext = { }; type TModalOptions = { - defaultRootId?: 'wallets_modal_responsive_root' | 'wallets_modal_root'; rootRef?: React.RefObject; }; @@ -73,9 +72,8 @@ const ModalProvider = ({ children }: React.PropsWithChildren) => { const modalRootRef = useMemo(() => { if (modalOptions?.rootRef?.current) return modalOptions?.rootRef; - if (isDesktop || modalOptions?.defaultRootId === 'wallets_modal_root') return rootRef; - return rootResponsiveRef; - }, [isDesktop, modalOptions]); + return rootRef; + }, [modalOptions?.rootRef]); return ( = ({ transaction }) => { description='Are you sure you want to cancel this transaction?' hideCloseButton title='Cancel transaction' - />, - { defaultRootId: 'wallets_modal_root' } + /> ); }, [cancelTransaction, isMobile, modal]); @@ -70,8 +69,7 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { description={transaction.description} hideCloseButton title='Transaction details' - />, - { defaultRootId: 'wallets_modal_root' } + /> ), [modal, transaction.description] ); diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx index 883993de7e4d..c19ea0106408 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx @@ -39,8 +39,7 @@ const TransactionsPendingRowField: React.FC = ({ className, hint, name, ]} description={hint.text} title='Transaction details' - />, - { defaultRootId: 'wallets_modal_root' } + /> ) : window.open(hint?.link); }, [hint, isMobile, show]); From 56744da97fd6c47351782adfbb0daed8af79a574 Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Thu, 14 Dec 2023 11:28:33 +0800 Subject: [PATCH 2/3] chore: reverted old changes --- .../components/ModalProvider/ModalProvider.scss | 16 ---------------- .../TransactionsPendingRow.tsx | 6 ++++-- .../TransactionsPendingRowField.tsx | 3 ++- 3 files changed, 6 insertions(+), 19 deletions(-) delete mode 100644 packages/wallets/src/components/ModalProvider/ModalProvider.scss diff --git a/packages/wallets/src/components/ModalProvider/ModalProvider.scss b/packages/wallets/src/components/ModalProvider/ModalProvider.scss deleted file mode 100644 index e2146b184b4a..000000000000 --- a/packages/wallets/src/components/ModalProvider/ModalProvider.scss +++ /dev/null @@ -1,16 +0,0 @@ -.wallets-modal { - transform: scale(1); - opacity: 1; - animation: mount 0.25s ease-out; -} - -@keyframes mount { - from { - transform: scale(0); - opacity: 0; - } - to { - transform: scale(1); - opacity: 1; - } -} diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx index b7d130342109..21c50e2f2c21 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/TransactionsPendingRow.tsx @@ -51,7 +51,8 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { description='Are you sure you want to cancel this transaction?' hideCloseButton title='Cancel transaction' - /> + />, + { defaultRootId: 'wallets_modal_root' } ); }, [cancelTransaction, isMobile, modal]); @@ -69,7 +70,8 @@ const TransactionsCryptoRow: React.FC = ({ transaction }) => { description={transaction.description} hideCloseButton title='Transaction details' - /> + />, + { defaultRootId: 'wallets_modal_root' } ), [modal, transaction.description] ); diff --git a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx index c19ea0106408..883993de7e4d 100644 --- a/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx +++ b/packages/wallets/src/features/cashier/modules/Transactions/components/TransactionsPendingRow/components/TransactionsPendingRowField/TransactionsPendingRowField.tsx @@ -39,7 +39,8 @@ const TransactionsPendingRowField: React.FC = ({ className, hint, name, ]} description={hint.text} title='Transaction details' - /> + />, + { defaultRootId: 'wallets_modal_root' } ) : window.open(hint?.link); }, [hint, isMobile, show]); From f5de736ed6234b7e2f7ceb6dce27c18c343f4fdb Mon Sep 17 00:00:00 2001 From: adrienne-rio Date: Mon, 19 Feb 2024 16:58:41 +0800 Subject: [PATCH 3/3] chore: added tests for block unblock user modal --- .../__tests__/BlockUnblockUserModal.spec.tsx | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx diff --git a/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx b/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx new file mode 100644 index 000000000000..5bb7d4dbebbd --- /dev/null +++ b/packages/p2p-v2/src/components/Modals/BlockUnblockUserModal/__tests__/BlockUnblockUserModal.spec.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { APIProvider } from '@deriv/api'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import BlockUnblockUserModal from '../BlockUnblockUserModal'; + +const wrapper = ({ children }: { children: JSX.Element }) => ( + +
+ {children} + +); + +const mockOnRequestClose = jest.fn(); +const mockUseBlockMutate = jest.fn(); +const mockUseUnblockMutate = jest.fn(); + +jest.mock('@deriv/api', () => ({ + ...jest.requireActual('@deriv/api'), + p2p: { + counterparty: { + useBlock: jest.fn(() => ({ + mutate: mockUseBlockMutate, + })), + useUnblock: jest.fn(() => ({ + mutate: mockUseUnblockMutate, + })), + }, + }, +})); + +describe('BlockUnblockUserModal', () => { + it('should render the modal with correct title and behaviour for blocking user', () => { + render( + , + { + wrapper, + } + ); + + expect( + screen.queryByText( + `You won't see Jane Doe's ads anymore and they won't be able to place orders on your ads.` + ) + ).toBeVisible(); + + const blockBtn = screen.getByRole('button', { + name: 'Block', + }); + userEvent.click(blockBtn); + + expect(mockUseBlockMutate).toBeCalledWith([1]); + }); + it('should render the modal with correct title and behaviour for unblocking user', () => { + render( + , + { + wrapper, + } + ); + + expect( + screen.queryByText( + `You will be able to see Hu Tao's ads. They'll be able to place orders on your ads, too.` + ) + ).toBeVisible(); + + const unblockBtn = screen.getByRole('button', { + name: 'Unblock', + }); + userEvent.click(unblockBtn); + + expect(mockUseUnblockMutate).toBeCalledWith([2]); + }); + it('should hide the modal when user clicks cancel', () => { + render( + , + { + wrapper, + } + ); + + const cancelBtn = screen.getByRole('button', { + name: 'Cancel', + }); + userEvent.click(cancelBtn); + + expect(mockOnRequestClose).toBeCalled(); + }); +});