Merge branch 'master' of github.com:binary-com/deriv-app into aum/PRO…

…DQA-38/client-redirection-to-correct-withdrawal-page-using-loginid
binary-com · Jul 3, 2023 · 0031dcd · 0031dcd
2 parents ba54bdf + 5dff230
commit 0031dcd
Show file tree

Hide file tree

Showing 276 changed files with 6,966 additions and 4,760 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -138,6 +138,12 @@ module.exports = {
         },
     },
     overrides: [
+        {
+            files: ['*.ts', '*.tsx'],
+            rules: {
+                'react/prop-types': 'off',
+            },
+        },
         {
             files: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
             extends: ['plugin:testing-library/react'],

diff --git a/.github/workflows/codecov.yml b/.github/workflows/codecov.yml
@@ -3,6 +3,8 @@ on:
   pull_request:
     branches:
       - '**'
+  env:
+    JEST_MAX_WORKERS: 4
   push:
     branches:
       - master
@@ -21,7 +23,7 @@ jobs:
           npm install
           npm run bootstrap
           npm run build:all
-          npm run test:jest 4
+          npm run test:jest
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3.1.1

diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -1,5 +1,5 @@
 {
     "*.{js,jsx,ts,tsx,md,html,css,scss}": "prettier --write",
-    "*.{js,jsx,ts,tsx}": "npx eslint --fix",
+    "*.{js,jsx,ts,tsx}": "eslint --fix --config .eslintrc.js",
     "*.{css,scss}": "npx stylelint --fix"
 }
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
         "ts-jest": "^26.4.2"
     },
     "scripts": {
-        "build:all": "nx build @deriv/components --skip-nx-cache && nx run-many --target=build",
+        "build:all": "nx build @deriv/components --skip-nx-cache && nx build @deriv/account --skip-nx-cache && nx run-many --target=build",
         "build:one": "f () { nx build @deriv/$1 $2 ;}; f",
         "build:since": "nx affected --target=build",
         "test:eslint-all": "nx run-many --target=test:eslint",
@@ -91,9 +91,9 @@
         "publish_package": "f () { lerna exec --scope=@deriv/${1:-'*'} -- npm run publish_package $2 ;}; f",
         "serve": "f () { lerna exec --scope=@deriv/${1:-'*'} -- npm run serve $npm_config_open;}; f",
         "start": "f () { lerna exec --scope=@deriv/${1:-'*'} -- npm run start ;}; f",
-        "test": "f () { bash ./scripts/circleci-config.test.sh && npm run test:stylelint  && npm run test:eslint-all && npm run test:jest ;}; f",
+        "test": "f () { bash ./scripts/circleci-config.test.sh && npm run test:stylelint  && npm run test:eslint-all && JEST_MAX_WORKERS=6 npm run test:jest  ;}; f",
         "test:stylelint": "stylelint \"./packages/*/src/**/*.s(a|c)ss\"",
-        "test:jest": "jest --all --maxWorkers=${1:-8}",
+        "test:jest": "jest --all --maxWorkers=${JEST_MAX_WORKERS:-'45%'}",
         "test:e2e": "cd end-to-end-test &&  npx playwright test",
         "test:e2e-dev": "cd end-to-end-test &&  npx playwright test --trace on && npx playwright show-report",
         "test:performance": "cd e2e_tests &&  jest -c ./jest.config.js --maxWorkers=2 --detectOpenHandles performance",

diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js
@@ -16,7 +16,6 @@ module.exports = function (env) {
             'api-token': 'Components/api-token',
             'currency-selector': 'Components/currency-selector',
             'currency-selector-config': 'Configs/currency-selector-config',
-            'currency-selector-schema': 'Configs/currency-selector-schema',
             'currency-radio-button-group': 'Components/currency-selector/radio-button-group.tsx',
             'currency-radio-button': 'Components/currency-selector/radio-button.tsx',
             'demo-message': 'Components/demo-message',

diff --git a/packages/account/src/Components/article/article.tsx b/packages/account/src/Components/article/article.tsx
@@ -11,7 +11,7 @@ type TDescriptionsItem = {
 
 export type TArticle = {
     title: string;
-    descriptions: Array<TDescriptionsItem & React.ReactElement>;
+    descriptions: Array<TDescriptionsItem | React.ReactElement>;
     onClickLearnMore?: () => void;
     className?: string;
 };

diff --git a/...__tests__/file-uploader-container.spec.js → ..._tests__/file-uploader-container.spec.tsx b/...__tests__/file-uploader-container.spec.js → ..._tests__/file-uploader-container.spec.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { isDesktop, isMobile, PlatformContext } from '@deriv/shared';
-import FileUploaderContainer from '../file-uploader-container';
+import FileUploaderContainer, { TFileUploaderContainer } from '../file-uploader-container';
 
 jest.mock('@deriv/components', () => {
     const original_module = jest.requireActual('@deriv/components');
@@ -26,7 +26,7 @@ describe('<FileUploaderContainer />', () => {
         jest.clearAllMocks();
     });
 
-    const props = {
+    const props: TFileUploaderContainer = {
         getSocket: jest.fn(),
         onFileDrop: jest.fn(),
         onRef: jest.fn(),
@@ -52,11 +52,7 @@ describe('<FileUploaderContainer />', () => {
     });
 
     it('should render FileUploaderContainer component if getSocket is not passed as prop', () => {
-        const new_props = {
-            onFileDrop: jest.fn(),
-            onRef: jest.fn(),
-        };
-        render(<FileUploaderContainer {...new_props} />);
+        render(<FileUploaderContainer {...props} />);
         expect(screen.getByTestId('dt_file_uploader_container')).toBeInTheDocument();
     });
 
@@ -109,7 +105,7 @@ describe('<FileUploaderContainer />', () => {
             </PlatformContext.Provider>
         );
 
-        expect(screen.getAllByText('mockedIcon')).toHaveLength(1);
+        expect(screen.getByText('mockedIcon')).toBeInTheDocument();
         expect(screen.queryByText(file_size_msg)).not.toBeInTheDocument();
         expect(screen.queryByText(file_type_msg)).not.toBeInTheDocument();
         expect(screen.queryByText(file_time_msg)).not.toBeInTheDocument();
@@ -120,7 +116,7 @@ describe('<FileUploaderContainer />', () => {
     it('should call ref function on rendering the component', () => {
         render(
             <PlatformContext.Provider value={{ is_appstore: true }}>
-                <FileUploaderContainer onRef={props.onRef} />
+                <FileUploaderContainer {...props} />
             </PlatformContext.Provider>
         );
 

diff --git a/...container/__tests__/file-uploader.spec.js → ...ontainer/__tests__/file-uploader.spec.tsx b/...container/__tests__/file-uploader.spec.js → ...ontainer/__tests__/file-uploader.spec.tsx
@@ -20,10 +20,14 @@ describe('<FileUploader />', () => {
         jest.clearAllMocks();
     });
 
-    const props = {
+    const props: {
+        onFileDrop: (file: File | undefined) => void;
+        getSocket: () => WebSocket;
+        ref: React.RefObject<HTMLElement>;
+    } = {
         onFileDrop: jest.fn(),
         getSocket: jest.fn(),
-        ref: React.createRef(),
+        ref: React.createRef<HTMLElement>(),
     };
 
     const large_file_error_msg = /file size should be 8mb or less/i;
@@ -48,11 +52,11 @@ describe('<FileUploader />', () => {
 
         const file = new File(['hello'], 'hello.png', { type: 'image/png' });
 
-        const input = screen.getByTestId('dt_file_upload_input');
+        const input: HTMLInputElement = screen.getByTestId('dt_file_upload_input');
         fireEvent.change(input, { target: { files: [file] } });
 
         await waitFor(() => {
-            expect(input.files[0]).toBe(file);
+            expect(input?.files?.[0]).toBe(file);
             expect(input.files).toHaveLength(1);
         });
     });
@@ -101,12 +105,12 @@ describe('<FileUploader />', () => {
         render(<FileUploader {...props} />);
         const file = new File(['hello'], 'hello.png', { type: 'image/png' });
 
-        const input = screen.getByTestId('dt_file_upload_input');
+        const input: HTMLInputElement = screen.getByTestId('dt_file_upload_input');
         fireEvent.change(input, { target: { files: [file] } });
 
         await waitFor(() => {
             expect(screen.getByText(/hello\.png/i)).toBeInTheDocument();
-            expect(input.files[0]).toBe(file);
+            expect(input?.files?.[0]).toBe(file);
             expect(input.files).toHaveLength(1);
         });
 
@@ -133,11 +137,11 @@ describe('<FileUploader />', () => {
         const blob = new Blob(['sample_data']);
         const file = new File([blob], 'hello.pdf', { type: 'application/pdf' });
 
-        const input = screen.getByTestId('dt_file_upload_input');
+        const input = screen.getByTestId('dt_file_upload_input') as HTMLInputElement;
         fireEvent.change(input, { target: { files: [file] } });
         await waitFor(() => {
             expect(screen.getByText(/hello\.pdf/i)).toBeInTheDocument();
-            expect(input.files[0]).toBe(file);
+            expect(input?.files?.[0]).toBe(file);
         });
         props.ref.current.upload();
         expect(compressImageFiles).toBeCalled();

diff --git a/...der-container/file-uploader-container.jsx → ...der-container/file-uploader-container.tsx b/...der-container/file-uploader-container.jsx → ...der-container/file-uploader-container.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Icon, Text } from '@deriv/components';
 import { PlatformContext, isDesktop, WS } from '@deriv/shared';
 import { Localize, localize } from '@deriv/translations';
-import FileUploader from './file-uploader.jsx';
+import FileUploader from './file-uploader';
+import { TFile, TPlatformContext } from 'Types';
+
+export type TFileUploaderContainer = {
+    is_description_enabled?: boolean;
+    getSocket: () => WebSocket;
+    onFileDrop: (file: TFile | undefined) => void;
+    onRef: (ref: React.RefObject<unknown> | undefined) => void;
+};
 
 const FileProperties = () => {
     const properties = [
@@ -37,8 +44,13 @@ const FileProperties = () => {
     );
 };
 
-const FileUploaderContainer = ({ is_description_enabled = true, getSocket, onFileDrop, onRef }) => {
-    const { is_appstore } = React.useContext(PlatformContext);
+const FileUploaderContainer = ({
+    is_description_enabled = true,
+    getSocket,
+    onFileDrop,
+    onRef,
+}: TFileUploaderContainer) => {
+    const { is_appstore } = React.useContext<Partial<TPlatformContext>>(PlatformContext);
     const ref = React.useRef();
 
     const getSocketFunc = getSocket ?? WS.getSocket;
@@ -124,11 +136,4 @@ const FileUploaderContainer = ({ is_description_enabled = true, getSocket, onFil
     );
 };
 
-FileUploaderContainer.propTypes = {
-    is_description_enabled: PropTypes.bool,
-    getSocket: PropTypes.func,
-    onFileDrop: PropTypes.func,
-    onRef: PropTypes.func,
-};
-
 export default FileUploaderContainer;
diff --git a/...file-uploader-container/file-uploader.jsx → ...file-uploader-container/file-uploader.tsx b/...file-uploader-container/file-uploader.jsx → ...file-uploader-container/file-uploader.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import DocumentUploader from '@binary-com/binary-document-uploader';
@@ -12,6 +11,11 @@ import {
     max_document_size,
     supported_filetypes,
 } from '@deriv/shared';
+import { TFile } from 'Types';
+
+type TFileObject = {
+    file: TFile;
+};
 
 const UploadMessage = () => {
     return (
@@ -23,34 +27,38 @@ const UploadMessage = () => {
         </React.Fragment>
     );
 };
-const fileReadErrorMessage = filename => {
+
+const fileReadErrorMessage = (filename: string) => {
     return localize('Unable to read file {{name}}', { name: filename });
 };
 
-const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
+const FileUploader = React.forwardRef<
+    HTMLElement,
+    { onFileDrop: (file: TFile | undefined) => void; getSocket: () => WebSocket }
+>(({ onFileDrop, getSocket }, ref) => {
     const [document_file, setDocumentFile] = useStateCallback({ files: [], error_message: null });
 
-    const handleAcceptedFiles = files => {
+    const handleAcceptedFiles = (files: TFileObject[]) => {
         if (files.length > 0) {
-            setDocumentFile({ files, error_message: null }, file => {
+            setDocumentFile({ files, error_message: null }, (file: TFile) => {
                 onFileDrop(file);
             });
         }
     };
 
-    const handleRejectedFiles = files => {
+    const handleRejectedFiles = (files: TFileObject[]) => {
         const is_file_too_large = files.length > 0 && files[0].file.size > max_document_size;
         const supported_files = files.filter(each_file => getSupportedFiles(each_file.file.name));
         const error_message =
             is_file_too_large && supported_files.length > 0
                 ? localize('File size should be 8MB or less')
                 : localize('File uploaded is not supported');
 
-        setDocumentFile({ files, error_message }, file => onFileDrop(file));
+        setDocumentFile({ files, error_message }, (file: TFile) => onFileDrop(file));
     };
 
     const removeFile = () => {
-        setDocumentFile({ files: [], error_message: null }, file => onFileDrop(file));
+        setDocumentFile({ files: [], error_message: null }, (file: TFile) => onFileDrop(file));
     };
 
     const upload = () => {
@@ -62,25 +70,33 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
         let is_any_file_error = false;
 
         return new Promise((resolve, reject) => {
-            compressImageFiles(document_file.files).then(files_to_process => {
-                readFiles(files_to_process, fileReadErrorMessage).then(processed_files => {
-                    processed_files.forEach(file => {
-                        if (file.message) {
-                            is_any_file_error = true;
-                            reject(file);
-                        }
-                    });
-                    const total_to_upload = processed_files.length;
-                    if (is_any_file_error || !total_to_upload) {
-                        onFileDrop(undefined);
-                        return; // don't start submitting files until all front-end validation checks pass
-                    }
-
-                    // send files
-                    const uploader_promise = uploader.upload(processed_files[0]).then(api_response => api_response);
-                    resolve(uploader_promise);
-                });
-            });
+            compressImageFiles(document_file.files)
+                .then(files_to_process => {
+                    readFiles(files_to_process, fileReadErrorMessage)
+                        .then(processed_files => {
+                            processed_files.forEach(file => {
+                                if (file.message) {
+                                    is_any_file_error = true;
+                                    reject(file);
+                                }
+                            });
+                            const total_to_upload = processed_files.length;
+                            if (is_any_file_error || !total_to_upload) {
+                                onFileDrop(undefined);
+                                return; // don't start submitting files until all front-end validation checks pass
+                            }
+
+                            // send files
+                            const uploader_promise = uploader
+                                .upload(processed_files[0])
+                                .then((api_response: unknown) => api_response);
+                            resolve(uploader_promise);
+                        })
+                        /* eslint-disable no-console */
+                        .catch(error => console.error('error: ', error));
+                })
+                /* eslint-disable no-console */
+                .catch(error => console.error('error: ', error));
         });
     };
 
@@ -122,9 +138,4 @@ const FileUploader = React.forwardRef(({ onFileDrop, getSocket }, ref) => {
 
 FileUploader.displayName = 'FileUploader';
 
-FileUploader.propTypes = {
-    onFileDrop: PropTypes.func,
-    getSocket: PropTypes.func,
-};
-
 export default FileUploader;
diff --git a/packages/account/src/Components/file-uploader-container/index.js b/packages/account/src/Components/file-uploader-container/index.js
diff --git a/packages/account/src/Components/file-uploader-container/index.ts b/packages/account/src/Components/file-uploader-container/index.ts
@@ -0,0 +1,3 @@
+import FileUploaderContainer from './file-uploader-container';
+
+export default FileUploaderContainer;