feat: sorry amina

niloofar-deriv · Jul 8, 2022 · ca7bc6c · ca7bc6c
1 parent 3261397
commit ca7bc6c
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 58 deletions.
diff --git a/...account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx b/...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 <NotRequired />;
     }
 
-    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 (
             <POISubmissionForMT5
                 has_attempted_idv={has_attempted_idv}
@@ -92,11 +97,54 @@ const ProofOfIdentityContainerforMt5 = ({
                 refreshNotifications={refreshNotifications}
                 residence_list={residence_list}
                 citizen_data={citizen_data}
-                has_idv_error={has_idv_error}
             />
         );
+    } 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 <UploadComplete is_from_external={is_from_external} needs_poa={needs_poa} />;
+            case identity_status_codes.verified:
+                return <Verified is_from_external={is_from_external} needs_poa={needs_poa} />;
+            case identity_status_codes.expired:
+                return (
+                    <Expired is_from_external={is_from_external} handleRequireSubmission={handleRequireSubmission} />
+                );
+            case identity_status_codes.rejected:
+            case identity_status_codes.suspected:
+                return <Limited handleRequireSubmission={handleRequireSubmission} />;
+            default:
+                break;
+        }
+    }
+
+    switch (identity_last_attempt.service) {
+        case service_code.idv:
+            return (
+                <IdvContainer
+                    handleRequireSubmission={handleRequireSubmission}
+                    idv={idv}
+                    is_from_external={!!is_from_external}
+                    needs_poa={needs_poa}
+                />
+            );
+        case service_code.onfido:
+            return (
+                <Onfido
+                    handleRequireSubmission={handleRequireSubmission}
+                    is_from_external={!!is_from_external}
+                    needs_poa={needs_poa}
+                    onfido={onfido}
+                />
+            );
+        case service_code.manual:
+            return <Unsupported manual={manual} />;
+        default:
+            return null;
     }
-    return null;
 };
 
 export default ProofOfIdentityContainerforMt5;
diff --git a/...ccount/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx b/...ccount/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 (
-                    <AutoHeightWrapper default_height={620} height_offset={50}>
-                        {({ setRef, height }) => (
-                            <div ref={setRef} style={{ height }}>
-                                <OnfidoUpload
-                                    country_code={country_code}
-                                    documents_supported={documents_supported}
-                                    handleViewComplete={handlePOIComplete}
-                                    height={height}
-                                    is_from_external={is_from_external}
-                                    refreshNotifications={refreshNotifications}
-                                />
-                            </div>
-                        )}
-                    </AutoHeightWrapper>
+                    <OnfidoUpload
+                        country_code={country_code}
+                        documents_supported={documents_supported}
+                        handleViewComplete={handlePOIComplete}
+                        is_from_external={is_from_external}
+                        refreshNotifications={refreshNotifications}
+                    />
                 );
             }
             case service_code.manual:

diff --git 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<string>('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 (
-        <ProofOfIdentityContainerforMt5
-            {...props}
-            height={height}
-            is_from_external={true}
-            onStateChange={(status: string) => onStateChange(status)}
-            citizen_data={citizen_data}
-        />
+        <AutoHeightWrapper default_height={620}>
+            {({ setRef, height }: { setRef: React.MutableRefObject<HTMLDivElement>; height: number }) => (
+                <div ref={setRef} className=''>
+                    <ProofOfIdentityContainerforMt5
+                        height={height}
+                        is_from_external={true}
+                        onStateChange={(status: string) => onStateChange(status)}
+                        citizen_data={citizen_data}
+                        {...props}
+                    />
+                </div>
+            )}
+        </AutoHeightWrapper>
     );
 };
 

diff --git 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<React.SetStateAction<boolean>>;
+    checked: boolean;
+};
+
+const ModalCheckbox = ({ setChecked, checked }: ModalCheckboxProps) => (
+    <div className='cfd-jurisdiction-card__jurisdiction-checkbox'>
+        <Checkbox onChange={() => setChecked(!checked)} value={checked} />
+        <Text as='p' align='center' size='xs' line_height='xs'>
+            {`I confirm and accept Deriv (V) Ltd 's Terms and Conditions`}
+        </Text>
+    </div>
+);
+
 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<React.SetStateAction<boolean>>;
-        checked: boolean;
-    }) => (
-        <div className='cfd-jurisdiction-card__jurisdiction-checkbox'>
-            <Checkbox onChange={() => setChecked(!checked)} value={checked} />
-            <Text as='p' align='center' size='xs' line_height='xs'>
-                I confirm and accept Deriv (V) Ltd 's Terms and Conditions
-            </Text>
-        </div>
-    );
-
     return (
         <>
             <div className='cfd-jurisdiction-card__wrapper'>

diff --git 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
@@ -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