Merge pull request binary-com#56 from nada-deriv/nada/P2PS-1100/order…

…-details-cancel-modal refactor: order details cancel modal refactor
ameerul-deriv · Aug 24, 2023 · 9e93e3c · 9e93e3c
2 parents ef69e4a + 72b4a51
commit 9e93e3c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 43 deletions.
diff --git a/...ests__/order-details-cancel-modal.spec.js → ...sts__/order-details-cancel-modal.spec.tsx b/...ests__/order-details-cancel-modal.spec.js → ...sts__/order-details-cancel-modal.spec.tsx
@@ -1,40 +1,42 @@
 import React from 'react';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useStores } from 'Stores';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
 import { requestWS } from 'Utils/websocket';
-import OrderDetailsCancelModal from '../order-details-cancel-modal.jsx';
-import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context.ts';
+import OrderDetailsCancelModal from '../order-details-cancel-modal';
 
 const el_modal = document.createElement('div');
 
 jest.mock('Utils/websocket', () => ({
     ...jest.requireActual('Utils/websocket'),
-    requestWS: jest.fn().mockRejectedValue(),
+    requestWS: jest.fn().mockRejectedValue('Error'),
 }));
 
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
     useIsMounted: jest.fn().mockReturnValue(() => true),
 }));
 
-jest.mock('Stores', () => ({
-    ...jest.requireActual('Stores'),
-    useStores: jest.fn().mockReturnValue({
-        general_store: {
-            advertiser_info: {
-                cancels_remaining: 10,
-            },
+const mock_store_values = {
+    general_store: {
+        advertiser_info: {
+            cancels_remaining: 10,
         },
-        order_store: {
-            cancellation_block_duration: '17',
-            cancellation_limit: '8',
-            cancellation_count_period: '19',
-            order_information: {
-                id: '10',
-            },
-            setErrorMessage: jest.fn(),
+    },
+    order_store: {
+        cancellation_block_duration: '17',
+        cancellation_limit: '8',
+        cancellation_count_period: '19',
+        order_information: {
+            id: '10',
         },
-    }),
+        setErrorMessage: jest.fn(),
+    },
+};
+
+jest.mock('Stores', () => ({
+    ...jest.requireActual('Stores'),
+    useStores: () => mock_store_values,
 }));
 
 jest.mock('Components/modal-manager/modal-manager-context', () => ({
@@ -55,15 +57,14 @@ describe('<OrderDetailsCancelModal/>', () => {
         document.body.removeChild(el_modal);
     });
 
-    it('should render cancel modal in desktop ', () => {
+    it('should render order details cancel modal in desktop ', () => {
         render(<OrderDetailsCancelModal />);
 
         expect(screen.getByText('Do you want to cancel this order?')).toBeInTheDocument();
     });
 
     it('should warn the user if the number of remaining cancels is equal to 1 ', () => {
-        const { general_store } = useStores();
-        general_store.advertiser_info.cancels_remaining = 1;
+        mock_store_values.general_store.advertiser_info.cancels_remaining = 1;
 
         render(<OrderDetailsCancelModal />);
 
@@ -76,30 +77,29 @@ describe('<OrderDetailsCancelModal/>', () => {
         const { hideModal } = useModalManagerContext();
 
         render(<OrderDetailsCancelModal />);
-        fireEvent.click(screen.getByRole('button', { name: 'Do not cancel' }));
+        userEvent.click(screen.getByRole('button', { name: 'Do not cancel' }));
 
         expect(hideModal).toHaveBeenCalled();
     });
 
     it('should cancel the order when Cancel this order button is clicked', () => {
-        requestWS.mockResolvedValue({ message: 'Success' });
+        (requestWS as jest.Mock).mockResolvedValue({ message: 'Success' });
         render(<OrderDetailsCancelModal />);
-        fireEvent.click(screen.getByRole('button', { name: 'Cancel this order' }));
+        userEvent.click(screen.getByRole('button', { name: 'Cancel this order' }));
 
         expect(requestWS).toHaveBeenCalled();
     });
 
     it('should show error message when error response is received', async () => {
         const error_msg = 'Error';
-        const { order_store } = useStores();
 
-        requestWS.mockResolvedValue({ error: { message: error_msg } });
+        (requestWS as jest.Mock).mockResolvedValue({ error: { message: error_msg } });
 
         render(<OrderDetailsCancelModal />);
-        fireEvent.click(screen.getByRole('button', { name: 'Cancel this order' }));
+        userEvent.click(screen.getByRole('button', { name: 'Cancel this order' }));
 
         await waitFor(() => {
-            expect(order_store.setErrorMessage).toHaveBeenCalledWith(error_msg);
+            expect(mock_store_values.order_store.setErrorMessage).toHaveBeenCalledWith(error_msg);
         });
     });
 });
diff --git a/...odals/order-details-cancel-modal/index.js → ...odals/order-details-cancel-modal/index.ts b/...odals/order-details-cancel-modal/index.js → ...odals/order-details-cancel-modal/index.ts
@@ -1,4 +1,4 @@
-import OrderDetailsCancelModal from './order-details-cancel-modal.jsx';
+import OrderDetailsCancelModal from './order-details-cancel-modal';
 import './order-details-cancel-modal.scss';
 
 export default OrderDetailsCancelModal;
diff --git a/...ncel-modal/order-details-cancel-modal.jsx → ...ncel-modal/order-details-cancel-modal.tsx b/...ncel-modal/order-details-cancel-modal.jsx → ...ncel-modal/order-details-cancel-modal.tsx
@@ -2,26 +2,34 @@ import React from 'react';
 import { Button, Modal, Text } from '@deriv/components';
 import { useIsMounted } from '@deriv/shared';
 import { Localize } from 'Components/i18next';
-import { requestWS } from 'Utils/websocket';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import SectionError from 'Components/section-error';
 import { useStores } from 'Stores';
-import FormError from 'Components/section-error';
-import { useModalManagerContext } from '../../modal-manager-context';
+import { requestWS } from 'Utils/websocket';
 
 const OrderDetailsCancelModal = () => {
     const { general_store, order_store } = useStores();
-    const { cancels_remaining } = general_store.advertiser_info;
     const { hideModal, is_modal_open } = useModalManagerContext();
+    const { cancels_remaining } = general_store.advertiser_info;
+    const {
+        cancellation_block_duration,
+        cancellation_count_period,
+        cancellation_limit,
+        error_message,
+        order_information,
+        setErrorMessage,
+    } = order_store ?? {};
 
     const isMounted = useIsMounted();
 
     const cancelOrderRequest = () => {
         requestWS({
             p2p_order_cancel: 1,
-            id: order_store.order_information.id,
+            id: order_information?.id ?? '',
         }).then(response => {
             if (isMounted()) {
                 if (response.error) {
-                    order_store.setErrorMessage(response.error.message);
+                    setErrorMessage(response.error.message);
                 }
 
                 hideModal();
@@ -48,9 +56,9 @@ const OrderDetailsCancelModal = () => {
                         <Localize
                             i18n_default_text='If you cancel your order {{cancellation_limit}} times in {{cancellation_period}} hours, you will be blocked from using Deriv P2P for {{block_duration}} hours. <br /> ({{number_of_cancels_remaining}} cancellations remaining)'
                             values={{
-                                block_duration: order_store.cancellation_block_duration,
-                                cancellation_limit: order_store.cancellation_limit,
-                                cancellation_period: order_store.cancellation_count_period,
+                                block_duration: cancellation_block_duration,
+                                cancellation_limit,
+                                cancellation_period: cancellation_count_period,
                                 number_of_cancels_remaining: cancels_remaining,
                             }}
                         />
@@ -60,7 +68,7 @@ const OrderDetailsCancelModal = () => {
                         <Localize
                             i18n_default_text="If you cancel this order, you'll be blocked from using Deriv P2P for {{block_duration}} hours."
                             values={{
-                                block_duration: order_store.cancellation_block_duration,
+                                block_duration: cancellation_block_duration,
                             }}
                         />
                     </Text>
@@ -72,7 +80,7 @@ const OrderDetailsCancelModal = () => {
                 </div>
             </Modal.Body>
             <Modal.Footer className='order-details-cancel-modal__footer'>
-                {order_store.error_message && <FormError message={order_store.error_message} />}
+                {error_message && <SectionError message={error_message} />}
                 <Button.Group>
                     <Button secondary large onClick={cancelOrderRequest}>
                         <Localize i18n_default_text='Cancel this order' />