From 1af1cc5355c378321772d433e8a6b4a28b93042b Mon Sep 17 00:00:00 2001 From: Shahzaib Date: Wed, 26 Jul 2023 15:32:13 +0800 Subject: [PATCH] shahzaib / KYC-93 / add issuing country to uploading files in manual verification (#9035) * chore: add issuing country to uploading file meta data * chore: update binary-document-uploader package * chore: add document issuing country in poa & poo document uploading * chore: reverted the null check line change * chore: add missing country_code upon retrying verification * chore: issuing country is not required at the moment from poo & poa * chore: empty commit * chore: update import path to fix eslint error message * ci: update package.json * chore: revert files affected by formatting --------- Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> --- packages/account/package.json | 2 +- .../file-uploader-container.spec.tsx | 1 + .../__tests__/file-uploader.spec.tsx | 4 +++- .../file-uploader-container.tsx | 8 +++++--- .../file-uploader-container/file-uploader.tsx | 7 ++++--- .../status/unsupported/detail-component.tsx | 1 + .../__test__/proof-of-ownership-form.spec.js | 3 +++ .../__test__/proof-of-ownership.spec.js | 15 ++++++++++++++ .../proof-of-ownership-form.jsx | 1 + .../ProofOfOwnership/proof-of-ownership.jsx | 3 +++ .../cellmeasurer/CellMeasurerCache.d.ts | 1 + .../date-picker/date-picker-input.tsx | 2 +- .../src/utils/files/file-uploader-utils.ts | 3 ++- .../Components/InfoBox/info-box-longcode.jsx | 20 ++++++++++++------- 14 files changed, 54 insertions(+), 17 deletions(-) diff --git a/packages/account/package.json b/packages/account/package.json index bee6b47f0d0f..4e8c7a4c4c3b 100644 --- a/packages/account/package.json +++ b/packages/account/package.json @@ -27,7 +27,7 @@ "deploy:production": "echo \"No deploy:production specified\"" }, "dependencies": { - "@binary-com/binary-document-uploader": "^2.4.7", + "@binary-com/binary-document-uploader": "^2.4.8", "@deriv/api-types": "^1.0.94", "@deriv/components": "^1.0.0", "@deriv/hooks": "^1.0.0", diff --git a/packages/account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.tsx b/packages/account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.tsx index 6f260a3817eb..f130d2324d37 100644 --- a/packages/account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.tsx +++ b/packages/account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.tsx @@ -30,6 +30,7 @@ describe('', () => { getSocket: jest.fn(), onFileDrop: jest.fn(), onRef: jest.fn(), + settings: {}, }; const file_size_msg = /less than 8mb/i; diff --git a/packages/account/src/Components/file-uploader-container/__tests__/file-uploader.spec.tsx b/packages/account/src/Components/file-uploader-container/__tests__/file-uploader.spec.tsx index af60693389b3..ea1245d225b4 100644 --- a/packages/account/src/Components/file-uploader-container/__tests__/file-uploader.spec.tsx +++ b/packages/account/src/Components/file-uploader-container/__tests__/file-uploader.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, screen, fireEvent, waitFor } from '@testing-library/react'; -import { compressImageFiles, isMobile, isDesktop, readFiles } from '@deriv/shared'; +import { compressImageFiles, isMobile, isDesktop, readFiles, TSettings } from '@deriv/shared'; import FileUploader from '../file-uploader'; jest.mock('@deriv/shared', () => ({ @@ -24,10 +24,12 @@ describe('', () => { onFileDrop: (file: File | undefined) => void; getSocket: () => WebSocket; ref: React.RefObject; + settings: TSettings; } = { onFileDrop: jest.fn(), getSocket: jest.fn(), ref: React.createRef(), + settings: {}, }; const large_file_error_msg = /file size should be 8mb or less/i; diff --git a/packages/account/src/Components/file-uploader-container/file-uploader-container.tsx b/packages/account/src/Components/file-uploader-container/file-uploader-container.tsx index 4eb092584d22..de6375f07109 100644 --- a/packages/account/src/Components/file-uploader-container/file-uploader-container.tsx +++ b/packages/account/src/Components/file-uploader-container/file-uploader-container.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import { Icon, Text } from '@deriv/components'; -import { PlatformContext, isDesktop, WS } from '@deriv/shared'; +import { PlatformContext, isDesktop, WS, TSettings } from '@deriv/shared'; import { Localize, localize } from '@deriv/translations'; import FileUploader from './file-uploader'; import { TFile, TPlatformContext } from 'Types'; @@ -11,6 +11,7 @@ export type TFileUploaderContainer = { getSocket: () => WebSocket; onFileDrop: (file: TFile | undefined) => void; onRef: (ref: React.RefObject | undefined) => void; + settings: TSettings; }; const FileProperties = () => { @@ -49,6 +50,7 @@ const FileUploaderContainer = ({ getSocket, onFileDrop, onRef, + settings, }: TFileUploaderContainer) => { const { is_appstore } = React.useContext>(PlatformContext); const ref = React.useRef(); @@ -67,7 +69,7 @@ const FileUploaderContainer = ({
- +
@@ -130,7 +132,7 @@ const FileUploaderContainer = ({ 'account-poa__upload-file--dashboard': isDesktop() && is_appstore, })} > - + ); diff --git a/packages/account/src/Components/file-uploader-container/file-uploader.tsx b/packages/account/src/Components/file-uploader-container/file-uploader.tsx index 69d40bec4efb..4efefe6d25b1 100644 --- a/packages/account/src/Components/file-uploader-container/file-uploader.tsx +++ b/packages/account/src/Components/file-uploader-container/file-uploader.tsx @@ -10,6 +10,7 @@ import { getSupportedFiles, max_document_size, supported_filetypes, + TSettings, } from '@deriv/shared'; import { TFile } from 'Types'; @@ -34,8 +35,8 @@ const fileReadErrorMessage = (filename: string) => { const FileUploader = React.forwardRef< HTMLElement, - { onFileDrop: (file: TFile | undefined) => void; getSocket: () => WebSocket } ->(({ onFileDrop, getSocket }, ref) => { + { onFileDrop: (file: TFile | undefined) => void; getSocket: () => WebSocket; settings: TSettings } +>(({ onFileDrop, getSocket, settings = {} }, ref) => { const [document_file, setDocumentFile] = useStateCallback({ files: [], error_message: null }); const handleAcceptedFiles = (files: TFileObject[]) => { @@ -72,7 +73,7 @@ const FileUploader = React.forwardRef< return new Promise((resolve, reject) => { compressImageFiles(document_file.files) .then(files_to_process => { - readFiles(files_to_process, fileReadErrorMessage) + readFiles(files_to_process, fileReadErrorMessage, settings) .then(processed_files => { processed_files.forEach(file => { if (file.message) { diff --git a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx index 15d02741ddb9..1405cd64e982 100644 --- a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx +++ b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx @@ -85,6 +85,7 @@ const DetailComponent = ({ expirationDate: expiration_date, documentId: data.document_id || '', lifetimeValid: +(lifetime_valid && !expiration_date), + document_issuing_country: country_code_key, }) .then(response => { file_to_upload_index += 1; diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership-form.spec.js b/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership-form.spec.js index 47d6991b8b11..b26bda1e2ff1 100644 --- a/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership-form.spec.js +++ b/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership-form.spec.js @@ -12,6 +12,7 @@ describe('proof-of-ownership-form.jsx', () => { refreshNotifications={jest.fn()} is_dark_mode={false} client_email={'test@testing.com'} + citizen='id' /> ); const cardItems = screen.getAllByRole('card-item'); @@ -25,6 +26,7 @@ describe('proof-of-ownership-form.jsx', () => { refreshNotifications={jest.fn()} is_dark_mode={false} client_email={'test@testing.com'} + citizen='id' /> ); const cardItems = screen.getAllByRole('card-item'); @@ -38,6 +40,7 @@ describe('proof-of-ownership-form.jsx', () => { refreshNotifications={jest.fn()} is_dark_mode={false} client_email={'test@testing.com'} + citizen='id' /> ); const poo_dropdown_button = await screen.findByTestId('dt_proof-of-ownership-button'); diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership.spec.js b/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership.spec.js index 6bf1b94608e2..121fabf2f3bb 100644 --- a/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership.spec.js +++ b/packages/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership.spec.js @@ -25,6 +25,9 @@ describe('proof-of-ownership.jsx', () => { ownership: { requests: [], status: 'none' }, }, }, + account_settings: { + citizen: 'id', + }, }, }); render(); @@ -40,6 +43,9 @@ describe('proof-of-ownership.jsx', () => { ownership: { requests: [], status: 'verified' }, }, }, + account_settings: { + citizen: 'id', + }, }, }); render(); @@ -55,6 +61,9 @@ describe('proof-of-ownership.jsx', () => { ownership: { requests: [], status: 'pending' }, }, }, + account_settings: { + citizen: 'id', + }, }, }); render(); @@ -70,6 +79,9 @@ describe('proof-of-ownership.jsx', () => { ownership: { requests: [], status: 'rejected' }, }, }, + account_settings: { + citizen: 'id', + }, }, }); render(); @@ -86,6 +98,9 @@ describe('proof-of-ownership.jsx', () => { needs_verification: ['ownership'], }, }, + account_settings: { + citizen: 'id', + }, }, }); render(); diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.jsx b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.jsx index 5f3b310f4085..12157b2f0198 100644 --- a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.jsx +++ b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-form.jsx @@ -283,6 +283,7 @@ ProofOfOwnershipForm.propTypes = { grouped_payment_method_data: PropTypes.object, refreshNotifications: PropTypes.func, updateAccountStatus: PropTypes.func, + citizen: PropTypes.string, }; export default ProofOfOwnershipForm; diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx index b0ce9a0cde8d..ab6ddc34bdd3 100644 --- a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx +++ b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx @@ -14,6 +14,8 @@ export const ProofOfOwnership = observer(() => { const { is_dark_mode_on: is_dark_mode } = ui; const cards = account_status?.authentication?.ownership?.requests; const [status, setStatus] = useState(POO_STATUSES.none); + const citizen = client?.account_settings?.citizen || client?.account_settings?.country_code; + const grouped_payment_method_data = React.useMemo(() => { const groups = {}; const payment_methods_config = getPaymentMethodsConfig(); @@ -50,6 +52,7 @@ export const ProofOfOwnership = observer(() => { updateAccountStatus={updateAccountStatus} refreshNotifications={refreshNotifications} client_email={client_email} + citizen={citizen} /> ); // Proof of ownership is required. } diff --git a/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts b/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts index e422edf8791b..c8c5eb3c30a3 100644 --- a/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts +++ b/packages/components/src/components/cellmeasurer/CellMeasurerCache.d.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/no-unresolved */ declare module '@enykeev/react-virtualized/dist/es/CellMeasurer/CellMeasurerCache' { import { CellMeasurerCache } from '@enykeev/react-virtualized/dist/es/CellMeasurer/CellMeasurerCache'; diff --git a/packages/components/src/components/date-picker/date-picker-input.tsx b/packages/components/src/components/date-picker/date-picker-input.tsx index ac6c0cfc1367..5c6dac964aab 100644 --- a/packages/components/src/components/date-picker/date-picker-input.tsx +++ b/packages/components/src/components/date-picker/date-picker-input.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import Icon from '../icon'; import Input from '../input'; -const DatePickerIcon = ({ icon, ...props }: React.ComponentProps) => ( +const DatePickerIcon = ({ icon, ...props }: React.ComponentProps) => ( ); diff --git a/packages/shared/src/utils/files/file-uploader-utils.ts b/packages/shared/src/utils/files/file-uploader-utils.ts index 14baeac8eb6f..552d71d4da88 100644 --- a/packages/shared/src/utils/files/file-uploader-utils.ts +++ b/packages/shared/src/utils/files/file-uploader-utils.ts @@ -2,7 +2,7 @@ import { compressImg, convertToBase64, isImageType, getFormatFromMIME, TImage } export type TFile = File & { file: Blob }; -type TSettings = { +export type TSettings = { documentType: { passport: string; national_identity_card: string; @@ -25,6 +25,7 @@ type TSettings = { expirationDate?: string; documentId?: string; lifetimeValid?: boolean; + document_issuing_country?: string; }; type TFileObject = TSettings & { diff --git a/packages/trader/src/Modules/Contract/Components/InfoBox/info-box-longcode.jsx b/packages/trader/src/Modules/Contract/Components/InfoBox/info-box-longcode.jsx index 301c067d5d08..4ca6bd3e1e10 100644 --- a/packages/trader/src/Modules/Contract/Components/InfoBox/info-box-longcode.jsx +++ b/packages/trader/src/Modules/Contract/Components/InfoBox/info-box-longcode.jsx @@ -10,21 +10,27 @@ const InfoBoxLongcode = ({ contract_info }) => { const [is_collapsed, setIsCollapsed] = React.useState(true); const handleToggle = () => { - setIsCollapsed(!is_collapsed); + setIsCollapsed(!is_collapsed); }; - + return (
- + {contract_info.longcode} {` `} - {contract_info.longcode.length > max_longcode_length && - - {is_collapsed ? localize('View more') : localize('View less')} - } + {contract_info.longcode.length > max_longcode_length && ( + + {is_collapsed ? localize('View more') : localize('View less')} + + )}
);