shahzaib / KYC-93 / add issuing country to uploading files in manual …

…verification (binary-com#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>
kate-deriv · Jul 26, 2023 · 1af1cc5 · 1af1cc5
1 parent 5d6150f
commit 1af1cc5
Show file tree

Hide file tree

Showing 14 changed files with 54 additions and 17 deletions.
diff --git 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/...account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.tsx b/...account/src/Components/file-uploader-container/__tests__/file-uploader-container.spec.tsx
@@ -30,6 +30,7 @@ describe('<FileUploaderContainer />', () => {
         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
@@ -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('<FileUploader />', () => {
         onFileDrop: (file: File | undefined) => void;
         getSocket: () => WebSocket;
         ref: React.RefObject<HTMLElement>;
+        settings: TSettings;
     } = {
         onFileDrop: jest.fn(),
         getSocket: jest.fn(),
         ref: React.createRef<HTMLElement>(),
+        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
@@ -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<unknown> | undefined) => void;
+    settings: TSettings;
 };
 
 const FileProperties = () => {
@@ -49,6 +50,7 @@ const FileUploaderContainer = ({
     getSocket,
     onFileDrop,
     onRef,
+    settings,
 }: TFileUploaderContainer) => {
     const { is_appstore } = React.useContext<Partial<TPlatformContext>>(PlatformContext);
     const ref = React.useRef();
@@ -67,7 +69,7 @@ const FileUploaderContainer = ({
                 <div className='account-poa__upload-file account-poa__upload-file-dashboard'>
                     <FileProperties />
                     <div className='account-poa__upload-file-zone'>
-                        <FileUploader getSocket={getSocketFunc} ref={ref} onFileDrop={onFileDrop} />
+                        <FileUploader getSocket={getSocketFunc} ref={ref} onFileDrop={onFileDrop} settings={settings} />
                     </div>
                 </div>
             </div>
@@ -130,7 +132,7 @@ const FileUploaderContainer = ({
                     'account-poa__upload-file--dashboard': isDesktop() && is_appstore,
                 })}
             >
-                <FileUploader getSocket={getSocketFunc} ref={ref} onFileDrop={onFileDrop} />
+                <FileUploader getSocket={getSocketFunc} ref={ref} onFileDrop={onFileDrop} settings={settings} />
             </div>
         </div>
     );

diff --git 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
@@ -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/...count/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership-form.spec.js b/...count/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/...es/account/src/Sections/Verification/ProofOfOwnership/__test__/proof-of-ownership.spec.js b/...es/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(<ProofOfOwnershipScreen />);
@@ -40,6 +43,9 @@ describe('proof-of-ownership.jsx', () => {
                         ownership: { requests: [], status: 'verified' },
                     },
                 },
+                account_settings: {
+                    citizen: 'id',
+                },
             },
         });
         render(<ProofOfOwnershipScreen />);
@@ -55,6 +61,9 @@ describe('proof-of-ownership.jsx', () => {
                         ownership: { requests: [], status: 'pending' },
                     },
                 },
+                account_settings: {
+                    citizen: 'id',
+                },
             },
         });
         render(<ProofOfOwnershipScreen />);
@@ -70,6 +79,9 @@ describe('proof-of-ownership.jsx', () => {
                         ownership: { requests: [], status: 'rejected' },
                     },
                 },
+                account_settings: {
+                    citizen: 'id',
+                },
             },
         });
         render(<ProofOfOwnershipScreen />);
@@ -86,6 +98,9 @@ describe('proof-of-ownership.jsx', () => {
                         needs_verification: ['ownership'],
                     },
                 },
+                account_settings: {
+                    citizen: 'id',
+                },
             },
         });
         render(<ProofOfOwnershipScreen />);

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
@@ -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
@@ -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
@@ -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
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Icon from '../icon';
 import Input from '../input';
 
-const DatePickerIcon = ({ icon, ...props }:  React.ComponentProps<typeof Icon>) => (
+const DatePickerIcon = ({ icon, ...props }: React.ComponentProps<typeof Icon>) => (
     <Icon className='dc-datepicker__icon' icon={icon} {...props} />
 );
 

diff --git 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
@@ -10,21 +10,27 @@ const InfoBoxLongcode = ({ contract_info }) => {
     const [is_collapsed, setIsCollapsed] = React.useState(true);
 
     const handleToggle = () => {
-      setIsCollapsed(!is_collapsed);
+        setIsCollapsed(!is_collapsed);
     };
-    
+
     return (
         <div className='info-box-longcode'>
             <Icon icon='IcContractFlag' className='info-box-longcode-icon' size={24} />
             <div className='info-box-longcode-wrapper'>
-                <Text size='xs' className={classNames('info-box-longcode-text', {'info-box-longcode-text--collapsed' : is_collapsed})}>
+                <Text
+                    size='xs'
+                    className={classNames('info-box-longcode-text', {
+                        'info-box-longcode-text--collapsed': is_collapsed,
+                    })}
+                >
                     {contract_info.longcode}
                 </Text>
                 {` `}
-                {contract_info.longcode.length > max_longcode_length && 
-                <Text as='a' href='#' size='xs' onClick={handleToggle} c>
-                    {is_collapsed ? localize('View more') : localize('View less')}
-                </Text>}
+                {contract_info.longcode.length > max_longcode_length && (
+                    <Text as='a' href='#' size='xs' onClick={handleToggle} c>
+                        {is_collapsed ? localize('View more') : localize('View less')}
+                    </Text>
+                )}
             </div>
         </div>
     );