diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx index 4e3904697bb8..847e1ee5344d 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx @@ -1,11 +1,17 @@ import React from 'react'; import { Loading } from '@deriv/components'; import { WS } from '@deriv/shared'; - import DemoMessage from 'Components/demo-message'; import ErrorMessage from 'Components/error-component'; +import Verified from 'Components/poi/status/verified'; +import Limited from 'Components/poi/status/limited'; +import Expired from 'Components/poi/status/expired'; +import UploadComplete from 'Components/poi/status/upload-complete'; import NotRequired from 'Components/poi/status/not-required'; -import POISubmissionForMT5 from './proof-of-identity-submission-for-mt5'; +import Onfido from './onfido.jsx'; +import IdvContainer from './idv.jsx'; +import Unsupported from 'Components/poi/status/unsupported'; +import POISubmissionForMT5 from './proof-of-identity-submission-for-mt5.jsx'; import { identity_status_codes, service_code } from './proof-of-identity-utils'; import { populateVerificationStatus } from '../Helpers/verification'; @@ -22,9 +28,12 @@ const ProofOfIdentityContainerforMt5 = ({ citizen_data, }) => { const [api_error, setAPIError] = React.useState(); + const [has_require_submission, setHasRequireSubmission] = React.useState(false); const [residence_list, setResidenceList] = React.useState(); const [is_status_loading, setStatusLoading] = React.useState(true); + const handleRequireSubmission = () => setHasRequireSubmission(true); + React.useEffect(() => { // only re-mount logic when switching is done if (!is_switching) { @@ -72,11 +81,7 @@ const ProofOfIdentityContainerforMt5 = ({ return ; } - const idv_resubmission_cases = ['rejected', 'suspected', 'expired']; - const has_idv_error = - identity_last_attempt?.service && service_code.idv && idv_resubmission_cases.includes(idv.status); - - if (identity_status === identity_status_codes.none || allow_poi_resubmission || has_idv_error) { + if (identity_status === identity_status_codes.none || allow_poi_resubmission || has_require_submission) { return ( ); + } else if ( + !identity_last_attempt || + // Prioritise verified status from back office. How we know this is if there is mismatch between current statuses (Should be refactored) + (identity_status === 'verified' && identity_status !== identity_last_attempt.status) + ) { + switch (identity_status) { + case identity_status_codes.pending: + return ; + case identity_status_codes.verified: + return ; + case identity_status_codes.expired: + return ( + + ); + case identity_status_codes.rejected: + case identity_status_codes.suspected: + return ; + default: + break; + } + } + + switch (identity_last_attempt.service) { + case service_code.idv: + return ( + + ); + case service_code.onfido: + return ( + + ); + case service_code.manual: + return ; + default: + return null; } - return null; }; export default ProofOfIdentityContainerforMt5; diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx index ac8d7c96b0af..c99e8d555b05 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx @@ -5,19 +5,18 @@ import Unsupported from 'Components/poi/status/unsupported'; import OnfidoUpload from './onfido-sdk-view.jsx'; import { identity_status_codes, submission_status_code, service_code } from './proof-of-identity-utils'; import { IdvDocSubmitOnSignup } from '../../../Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.jsx'; -import { AutoHeightWrapper } from '@deriv/components'; const POISubmissionForMT5 = ({ + citizen_data, + has_idv_error, idv, is_from_external, is_idv_disallowed, onfido, onStateChange, refreshNotifications, - citizen_data, - has_idv_error, }) => { - const [submission_status, setSubmissionStatus] = React.useState(); // submitting + const [submission_status, setSubmissionStatus] = React.useState(); const [submission_service, setSubmissionService] = React.useState(); React.useEffect(() => { @@ -76,20 +75,13 @@ const POISubmissionForMT5 = ({ const documents_supported = Object.keys(doc_obj).map(d => doc_obj[d].display_name); return ( - - {({ setRef, height }) => ( -
- -
- )} -
+ ); } case service_code.manual: diff --git a/packages/cfd/src/Components/cfd-poi.tsx b/packages/cfd/src/Components/cfd-poi.tsx index dda189c63227..6972434bf738 100644 --- a/packages/cfd/src/Components/cfd-poi.tsx +++ b/packages/cfd/src/Components/cfd-poi.tsx @@ -1,4 +1,6 @@ +/* eslint react/prop-types: 0 */ import { ProofOfIdentityContainerforMt5 } from '@deriv/account'; +import { AutoHeightWrapper } from '@deriv/components'; import { GetAccountStatus, GetSettings, ResidenceList } from '@deriv/api-types'; import React from 'react'; import RootStore from 'Stores/index'; @@ -27,7 +29,6 @@ export type TCFDPOIProps = { account_status?: GetAccountStatus; addNotificationByKey: (key: string) => void; fetchResidenceList?: () => void; - height: string; is_switching: boolean; is_virtual: boolean; onSave: (index: number, values: TFormValues) => void; @@ -39,7 +40,7 @@ export type TCFDPOIProps = { residence_list: ResidenceList; }; -const CFDPOI = ({ index, onSave, onSubmit, height, ...props }: TCFDPOIProps) => { +const CFDPOI = ({ index, onSave, onSubmit, ...props }: TCFDPOIProps) => { const [poi_state, setPOIState] = React.useState('none'); const citizen = props.account_settings?.citizen || props.account_settings?.country_code; const citizen_data = props.residence_list?.find(item => item.value === citizen); @@ -50,13 +51,19 @@ const CFDPOI = ({ index, onSave, onSubmit, height, ...props }: TCFDPOIProps) => onSubmit(index, { poi_state }, false); }; return ( - onStateChange(status)} - citizen_data={citizen_data} - /> + + {({ setRef, height }: { setRef: React.MutableRefObject; height: number }) => ( +
+ onStateChange(status)} + citizen_data={citizen_data} + {...props} + /> +
+ )} +
); }; diff --git a/packages/cfd/src/Containers/jurisdiction-modal-content.tsx b/packages/cfd/src/Containers/jurisdiction-modal-content.tsx index cc4fcc37cced..5107841124ee 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal-content.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal-content.tsx @@ -213,6 +213,20 @@ const JurisdictionCard = ({ ); }; +type ModalCheckboxProps = { + setChecked: React.Dispatch>; + checked: boolean; +}; + +const ModalCheckbox = ({ setChecked, checked }: ModalCheckboxProps) => ( +
+ setChecked(!checked)} value={checked} /> + + {`I confirm and accept Deriv (V) Ltd 's Terms and Conditions`} + +
+); + const JurisdictionModalContent = ({ jurisdiction_selected_card, account_type, @@ -235,16 +249,18 @@ const JurisdictionModalContent = ({ const cardsToBeShown = (type_of_card: string) => { const is_available = account_type === 'synthetic' - ? synthetic_available_accounts.some(account => account.shortcode === type_of_card) - : financial_available_accounts.some(account => account.shortcode === type_of_card); + ? synthetic_available_accounts?.some(account => account.shortcode === type_of_card) + : financial_available_accounts?.some(account => account.shortcode === type_of_card); return is_available; }; const disableCard = (type_of_card: string) => { const is_available = account_type === 'synthetic' - ? real_synthetic_accounts_existing_data.some(account => account.landing_company_short === type_of_card) - : real_financial_accounts_existing_data.some(account => account.landing_company_short === type_of_card); + ? real_synthetic_accounts_existing_data?.some(account => account.landing_company_short === type_of_card) + : real_financial_accounts_existing_data?.some( + account => account.landing_company_short === type_of_card + ); return is_available; }; @@ -304,21 +320,6 @@ const JurisdictionModalContent = ({ ); }; - const ModalCheckbox = ({ - setChecked, - checked, - }: { - setChecked: React.Dispatch>; - checked: boolean; - }) => ( -
- setChecked(!checked)} value={checked} /> - - I confirm and accept Deriv (V) Ltd 's Terms and Conditions - -
- ); - return ( <>
diff --git a/packages/cfd/src/Containers/jurisdiction-modal.tsx b/packages/cfd/src/Containers/jurisdiction-modal.tsx index 7593f629bd26..64bafbbe2abf 100644 --- a/packages/cfd/src/Containers/jurisdiction-modal.tsx +++ b/packages/cfd/src/Containers/jurisdiction-modal.tsx @@ -99,7 +99,7 @@ const JurisdictionModal = ({ const poi_status = authentication_status?.identity_status; const poi_poa_verified = poi_status === 'verified' && poa_status === 'verified'; - const bvi_checks = + const disable_bvi_next = (poi_status === 'pending' && poa_status !== 'pending') || (poi_status === 'pending' && poa_status !== 'verified') || (poa_status === 'pending' && poi_status !== 'pending') || @@ -170,7 +170,7 @@ const JurisdictionModal = ({ (poi_poa_verified && !checked && jurisdiction_selected_card !== 'svg') || (jurisdiction_selected_card === 'labuan' && !checked) || !jurisdiction_selected_card || - (jurisdiction_selected_card !== 'svg' && bvi_checks) + (jurisdiction_selected_card !== 'svg' && disable_bvi_next) } primary onClick={() => { @@ -195,7 +195,7 @@ const JurisdictionModal = ({ (poi_poa_verified && !checked && jurisdiction_selected_card !== 'svg') || (jurisdiction_selected_card === 'labuan' && !checked) || !jurisdiction_selected_card || - (jurisdiction_selected_card !== 'svg' && bvi_checks) + (jurisdiction_selected_card !== 'svg' && disable_bvi_next) } primary onClick={() => { diff --git a/tsconfig.json b/tsconfig.json index 6fcd617e082b..564fd5c46a73 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "module": "es2022", // Specify module code generation + "experimentalDecorators": true, "target": "es5", // Specify ECMAScript target version "jsx": "react", // Support JSX in .tsx files "lib": ["dom", "dom.iterable", "esnext"], // List of library files to be included in the compilation