Ameerul /P2PS 1082 Refactor Block User Modal

packages/p2p/src/components/modal-manager/modals/block-user-modal/__tests__/block-user-modal.spec.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { useStores } from 'Stores';
+import BlockUserModal from '../block-user-modal';
+
+const mock_store: DeepPartial<ReturnType<typeof useStores>> = {
+    general_store: {
+        block_unblock_user_error: '',
+    },
+};
+
+const el_modal = document.createElement('div');
+
+const block_user_modal_props = {
+    advertiser_name: 'test',
+    is_advertiser_blocked: false,
+    onCancel: jest.fn(),
+    onSubmit: jest.fn(),
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: jest.fn(() => mock_store),
+}));
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    ...jest.requireActual('Components/modal-manager/modal-manager-context'),
+    useModalManagerContext: jest.fn(() => ({
+        is_modal_open: true,
+    })),
+}));
+
+describe('<BlockUserModal />', () => {
+    beforeAll(() => {
+        el_modal.setAttribute('id', 'modal_root');
+        document.body.appendChild(el_modal);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(el_modal);
+    });
+
+    it('should show Block message if advertiser is not blocked by user', () => {
+        render(<BlockUserModal {...block_user_modal_props} />);
+
+        expect(screen.getByText('Block test?')).toBeInTheDocument();
+        expect(
+            screen.getByText(/You won't see test's ads anymore and they won't be able to place orders on your ads./)
+        ).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Block' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    });
+
+    it('should show Unblock message if advertiser is blocked by user', () => {
+        render(<BlockUserModal {...block_user_modal_props} is_advertiser_blocked={true} />);
+
+        expect(screen.getByText('Unblock test?')).toBeInTheDocument();
+        expect(
+            screen.getByText(/You will be able to see test's ads. They'll be able to place orders on your ads, too./)
+        ).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Unblock' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    });
+});

packages/p2p/src/components/modal-manager/modals/block-user-modal/block-user-modal.jsx → packages/p2p/src/components/modal-manager/modals/block-user-modal/block-user-modal.tsx

@@ -1,12 +1,18 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Modal, Text } from '@deriv/components';
-import { observer } from 'mobx-react-lite';
+import { observer } from '@deriv/stores';
 import { Localize } from 'Components/i18next';
-import { useStores } from 'Stores';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { useStores } from 'Stores';
+
+type TBlockUserModalProps = {
+    advertiser_name: string;
+    is_advertiser_blocked: boolean;
+    onCancel: () => void;
+    onSubmit: () => void;
+};
 
-const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, onCancel, onSubmit }) => {
+const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, onCancel, onSubmit }: TBlockUserModalProps) => {
     const { general_store } = useStores();
     const { is_modal_open } = useModalManagerContext();
 
@@ -67,11 +73,4 @@ const BlockUserModal = ({ advertiser_name, is_advertiser_blocked, onCancel, onSu
     );
 };
 
-BlockUserModal.propTypes = {
-    advertiser_name: PropTypes.string.isRequired,
-    is_advertiser_blocked: PropTypes.bool.isRequired,
-    onCancel: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-};
-
 export default observer(BlockUserModal);

packages/p2p/src/components/modal-manager/modals/block-user-modal/index.js → packages/p2p/src/components/modal-manager/modals/block-user-modal/index.ts

@@ -1,4 +1,4 @@
-import BlockUserModal from './block-user-modal.jsx';
+import BlockUserModal from './block-user-modal';
 import './block-user-modal.scss';
 
 export default BlockUserModal;