Ameerul / P2PS-1732 / Refactor FileUploaderComponent

packages/p2p/src/components/file-uploader-component/__test__/file-uploader-component.spec.js → packages/p2p/src/components/file-uploader-component/__test__/file-uploader-component.spec.tsx

@@ -1,59 +1,63 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { isMobile, isDesktop } from '@deriv/shared';
+import { mockStore, StoreProvider } from '@deriv/stores';
 import FileUploaderComponent from '../file-uploader-component';
 
+const wrapper = ({ children }: { children: JSX.Element }) => (
+    <StoreProvider store={mockStore({ ui: { is_mobile: false } })}>{children}</StoreProvider>
+);
+
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
-    isDesktop: jest.fn(),
-    isMobile: jest.fn(),
     compressImageFiles: jest.fn(() => Promise.resolve([{ path: 'hello.pdf' }])),
     readFiles: jest.fn(),
 }));
 
 jest.mock('@binary-com/binary-document-uploader');
 
 describe('<FileUploaderComponent />', () => {
-    beforeEach(() => {
-        isDesktop.mockReturnValue(true);
-        isMobile.mockReturnValue(false);
-        jest.clearAllMocks();
-    });
-
-    const file = new File(['hello'], 'hello.png', { type: 'image/png' });
+    const file: File = new File(['hello'], 'hello.png', { type: 'image/png' });
     const props = {
         accept: 'image/pdf, image/png',
         filename_limit: 26,
+        hover_message: 'hover here',
         max_size: 2097152,
         multiple: false,
         onDropAccepted: jest.fn(),
         onDropRejected: jest.fn(),
-        validation_error_message: null,
+        validation_error_message: '',
         onClickClose: jest.fn(),
         upload_message: 'upload here',
-        value: [],
+        value: [] as File[],
     };
 
     it('should render FileUploaderComponent component in desktop mode', async () => {
-        render(<FileUploaderComponent {...props} />);
+        render(<FileUploaderComponent {...props} />, { wrapper });
         expect(screen.getByText('upload here')).toBeInTheDocument();
     });
 
     it('should upload supported file', async () => {
         props.value = [file];
-        render(<FileUploaderComponent {...props} />);
-        const input = screen.getByTestId('dt_file_upload_input');
+
+        render(<FileUploaderComponent {...props} />, { wrapper });
+
+        const input = screen.getByTestId('dt_file_upload_input') as HTMLInputElement;
         fireEvent.change(input, { target: { files: [file] } });
+
         await waitFor(() => {
-            expect(input.files[0]).toBe(file);
-            expect(input.files).toHaveLength(1);
+            if (input.files) {
+                expect(input.files[0]).toBe(file);
+                expect(input.files).toHaveLength(1);
+            }
         });
+
         expect(screen.getByText('hello.png')).toBeInTheDocument();
     });
 
     it('should show error message when unsupported file is uploaded', async () => {
         props.validation_error_message = 'error';
-        render(<FileUploaderComponent {...props} />);
+
+        render(<FileUploaderComponent {...props} />, { wrapper });
 
         const unsupported_file = new File(['hello'], 'hello.html', { type: 'html' });
         const input = screen.getByTestId('dt_file_upload_input');

packages/p2p/src/components/file-uploader-component/file-uploader-component.jsx → packages/p2p/src/components/file-uploader-component/file-uploader-component.tsx

@@ -1,9 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FileDropzone, Icon, Text } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
 import { localize } from 'Components/i18next';
 
+type TFileUploaderComponentProps = {
+    accept: string;
+    hover_message: string;
+    max_size: number;
+    multiple?: boolean;
+    onClickClose: () => void;
+    onDropAccepted: (files: File[]) => void;
+    onDropRejected: (files: File[]) => void;
+    upload_message: string;
+    validation_error_message: string;
+    value: (File & { file: Blob })[];
+};
+
 const FileUploaderComponent = ({
     accept,
     hover_message,
@@ -15,12 +27,16 @@ const FileUploaderComponent = ({
     upload_message,
     validation_error_message,
     value,
-}) => {
+}: TFileUploaderComponentProps) => {
+    const {
+        ui: { is_mobile },
+    } = useStore();
+
     const getUploadMessage = () => {
         return (
             <>
                 <Icon icon='IcCloudUpload' size={50} />
-                <Text as='div' line-height={isMobile() ? 'xl' : 'l'} size={isMobile() ? 'xxs' : 'xs'} weight='bold'>
+                <Text as='div' line-height={is_mobile ? 'xl' : 'l'} size={is_mobile ? 'xxs' : 'xs'} weight='bold'>
                     {upload_message}
                 </Text>
             </>
@@ -44,29 +60,15 @@ const FileUploaderComponent = ({
             />
             {(value.length > 0 || !!validation_error_message) && (
                 <Icon
-                    icon='IcCloseCircle'
                     className={'file-uploader-component__close-icon'}
-                    onClick={onClickClose}
                     color='secondary'
                     data_testid='dt_remove_file_icon'
+                    icon='IcCloseCircle'
+                    onClick={onClickClose}
                 />
             )}
         </div>
     );
 };
 
-FileUploaderComponent.propTypes = {
-    accept: PropTypes.string,
-    hover_message: PropTypes.string,
-    error_messages: PropTypes.string,
-    max_size: PropTypes.number,
-    multiple: PropTypes.bool,
-    upload_message: PropTypes.string,
-    onClickClose: PropTypes.func,
-    onDropAccepted: PropTypes.func,
-    onDropRejected: PropTypes.func,
-    validation_error_message: PropTypes.string,
-    value: PropTypes.arrayOf(PropTypes.instanceOf(File)),
-};
-
 export default FileUploaderComponent;

packages/p2p/src/components/file-uploader-component/index.js → packages/p2p/src/components/file-uploader-component/index.ts

@@ -1,4 +1,4 @@
-import FileUploaderComponent from './file-uploader-component.jsx';
+import FileUploaderComponent from './file-uploader-component';
 import './file-uploader-component.scss';
 
 export default FileUploaderComponent;

packages/p2p/src/components/modal-manager/modals/order-details-confirm-modal/__tests__/order-details-confirm-modal.spec.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { mockStore, StoreProvider } from '@deriv/stores';
 import { useStores } from 'Stores';
-import OrderDetailsConfirmModal from '../order-details-confirm-modal.jsx';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import OrderDetailsConfirmModal from '../order-details-confirm-modal.jsx';
 
 const el_modal = document.createElement('div');
 
+const wrapper = ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>;
+
 jest.mock('Utils/websocket', () => ({
     ...jest.requireActual('Utils/websocket'),
     requestWS: jest.fn().mockResolvedValue({ error: { message: 'P2P Error' } }),
@@ -63,7 +66,7 @@ describe('<OrderDetailsConfirmModal/>', () => {
     });
 
     it('should render the modal', () => {
-        render(<OrderDetailsConfirmModal />);
+        render(<OrderDetailsConfirmModal />, { wrapper });
 
         expect(screen.getByText('Payment confirmation')).toBeInTheDocument();
         expect(
@@ -78,7 +81,7 @@ describe('<OrderDetailsConfirmModal/>', () => {
     it('should handle GoBack Click', () => {
         const { hideModal } = useModalManagerContext();
 
-        render(<OrderDetailsConfirmModal />);
+        render(<OrderDetailsConfirmModal />, { wrapper });
 
         const cancel_button = screen.getByRole('button', { name: 'Go Back' });
         expect(cancel_button).toBeInTheDocument();
@@ -90,7 +93,7 @@ describe('<OrderDetailsConfirmModal/>', () => {
         const { hideModal } = useModalManagerContext();
         const { confirmOrderRequest, order_information } = order_store;
 
-        render(<OrderDetailsConfirmModal />);
+        render(<OrderDetailsConfirmModal />, { wrapper });
         const file = new File(['hello'], 'hello.png', { type: 'image/png' });
         const input = screen.getByTestId('dt_file_upload_input');
         fireEvent.change(input, { target: { files: [file] } });

packages/p2p/src/components/modal-manager/modals/order-details-confirm-modal/order-details-confirm-modal.jsx

@@ -75,16 +75,14 @@ const OrderDetailsConfirmModal = () => {
                     </Text>
                     <FileUploaderComponent
                         accept='image/png, image/jpeg, image/jpg, application/pdf'
-                        filename_limit={26}
                         hover_message={localize('Upload receipt here')}
                         max_size={max_pot_file_size}
-                        multiple={false}
+                        onClickClose={removeFile}
                         onDropAccepted={handleAcceptedFiles}
                         onDropRejected={handleRejectedFiles}
+                        upload_message={localize('Upload receipt here')}
                         validation_error_message={document_file.error_message}
                         value={document_file.files}
-                        onClickClose={removeFile}
-                        upload_message={localize('Upload receipt here')}
                     />
                 </Modal.Body>
                 <Modal.Footer className='order-details-confirm-modal__footer'>