Merge pull request #5 from nada-deriv/nada/P2PS-1101/order-details-co…

…nfirm-modal

refactor: order details confirm modal, fileuploader refactoring

packages/p2p/src/components/file-uploader-component/__tests__/file-uploader-component.spec.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import FileUploaderComponent from '../file-uploader-component';
+
+describe('<FileUploaderComponent />', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const file = new File(['hello'], 'hello.png', { type: 'image/png' });
+    const props = {
+        accept: 'image/pdf, image/png',
+        filename_limit: 26,
+        hover_message: 'drop here',
+        max_size: 2097152,
+        multiple: false,
+        setDocumentFile: jest.fn(),
+        validation_error_message: null,
+        upload_message: 'upload here',
+        value: [],
+    };
+
+    it('should render FileUploaderComponent component in desktop mode', async () => {
+        render(<FileUploaderComponent {...props} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
+        });
+        expect(screen.getByText('upload here')).toBeInTheDocument();
+    });
+
+    it('should upload supported file', async () => {
+        const new_props = {
+            ...props,
+            value: [file],
+        };
+        render(<FileUploaderComponent {...new_props} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
+        });
+        const input: HTMLInputElement = screen.getByTestId('dt_file_upload_input');
+        userEvent.upload(input, file);
+        await waitFor(() => {
+            expect(input.files?.[0]).toBe(file);
+            expect(input.files).toHaveLength(1);
+        });
+        expect(props.setDocumentFile).toHaveBeenCalledWith({ files: [file], error_message: null });
+        expect(screen.getByText('hello.png')).toBeInTheDocument();
+    });
+
+    it('should show error message when unsupported file is uploaded', async () => {
+        const new_props = { ...props, validation_error_message: 'error' };
+        render(<FileUploaderComponent {...new_props} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
+        });
+
+        const unsupported_file = new File(['hello'], 'hello.html', { type: 'html' });
+        const input = screen.getByTestId('dt_file_upload_input');
+        userEvent.upload(input, unsupported_file);
+
+        await waitFor(() => {
+            expect(screen.getByText('error')).toBeInTheDocument();
+        });
+    });
+    it('should handle remove File', async () => {
+        const new_props = { ...props, validation_error_message: 'error' };
+        render(<FileUploaderComponent {...new_props} />, {
+            wrapper: ({ children }) => <StoreProvider store={mockStore({})}>{children}</StoreProvider>,
+        });
+
+        const input: HTMLInputElement = screen.getByTestId('dt_file_upload_input');
+        userEvent.upload(input, file);
+        await waitFor(() => {
+            expect(input.files?.[0]).toBe(file);
+            expect(input.files).toHaveLength(1);
+        });
+        const remove_icon = screen.getByTestId('dt_remove_file_icon');
+        expect(remove_icon).toBeInTheDocument();
+        userEvent.click(remove_icon);
+        expect(props.setDocumentFile).toHaveBeenCalledWith({ files: [], error_message: null });
+    });
+});

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import { FileDropzone, Icon, Text } from '@deriv/components';
+import { TFile } from '@deriv/shared';
+import { useStore } from '@deriv/stores';
+import { localize } from 'Components/i18next';
+import { getErrorMessage } from 'Utils/file-uploader';
+
+type TDocumentFile = {
+    files: TFile[];
+    error_message: string | null;
+};
+
+type TFileUploaderComponentProps = {
+    accept: string;
+    hover_message: string;
+    max_size: number;
+    multiple?: boolean;
+    setDocumentFile: React.Dispatch<React.SetStateAction<TDocumentFile>>;
+    upload_message: string;
+    validation_error_message: string | null;
+    value: File[];
+};
+
+type TUploadMessageProps = {
+    upload_message: string;
+};
+
+const UploadMessage = ({ upload_message }: TUploadMessageProps) => {
+    const { ui } = useStore();
+    const { is_mobile } = ui;
+    return (
+        <React.Fragment>
+            <Icon icon='IcCloudUpload' size={50} />
+            <Text as='div' line-height={is_mobile ? 'xl' : 'l'} size={is_mobile ? 'xxs' : 'xs'} weight='bold'>
+                {upload_message}
+            </Text>
+        </React.Fragment>
+    );
+};
+
+const FileUploaderComponent = ({
+    accept,
+    hover_message,
+    max_size,
+    multiple = false,
+    setDocumentFile,
+    upload_message,
+    validation_error_message,
+    value,
+}: TFileUploaderComponentProps) => {
+    const handleAcceptedFiles = (files: TFile[]) => {
+        if (files.length > 0) {
+            setDocumentFile({ files, error_message: null });
+        }
+    };
+
+    const removeFile = () => {
+        setDocumentFile({ files: [], error_message: null });
+    };
+
+    const handleRejectedFiles = (files: TFile[]) => {
+        setDocumentFile({ files, error_message: getErrorMessage(files) });
+    };
+
+    return (
+        <div className='file-uploader-component'>
+            <FileDropzone
+                accept={accept}
+                error_message={localize('Please upload supported file type.')}
+                filename_limit={26}
+                hover_message={hover_message}
+                max_size={max_size}
+                message={<UploadMessage upload_message={upload_message} />}
+                multiple={multiple}
+                onDropAccepted={handleAcceptedFiles}
+                onDropRejected={handleRejectedFiles}
+                validation_error_message={validation_error_message}
+                value={value}
+            />
+            {(value.length > 0 || !!validation_error_message) && (
+                <Icon
+                    className={'file-uploader-component__close-icon'}
+                    color='secondary'
+                    data_testid='dt_remove_file_icon'
+                    icon='IcCloseCircle'
+                    onClick={removeFile}
+                />
+            )}
+        </div>
+    );
+};
+
+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;