WALL-2668/chore: link all the flow for mt5 real account signup includ…

…ing idv, onfido and manual upload (deriv-com#11582)

* chore: link all the flow for mt5 real account signup including idv, onfido and manual upload

* fix: change back to idvscreen

packages/api/src/hooks/useSettings.ts

@@ -16,7 +16,20 @@ const useSettings = () => {
     const update = useCallback((payload: TSetSettingsPayload) => mutate({ payload }), [mutate]);
 
     // Add additional information to the settings response.
-    const modified_settings = useMemo(() => ({ ...data?.get_settings }), [data?.get_settings]);
+    const modified_settings = useMemo(() => {
+        const citizenship = data?.get_settings?.citizen ?? '';
+        const account = data?.get_settings?.account_opening_reason ?? '';
+        const placeofbirth = data?.get_settings?.place_of_birth ?? '';
+        const taxResidence = data?.get_settings?.tax_residence ?? '';
+        const taxIdentificationnumber = data?.get_settings?.tax_identification_number ?? '';
+
+        return {
+            ...data?.get_settings,
+            has_submitted_personal_details: Boolean(
+                citizenship && account && placeofbirth && taxResidence && taxIdentificationnumber
+            ),
+        };
+    }, [data?.get_settings]);
 
     return {
         /** The settings response. */

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/ManualDocumentUpload.tsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
 import { DocumentSelection } from './components/DocumentSelection';
+import { DrivingLicenseDocumentUpload } from './components/DrivingLicenseDocumentUpload';
+import { IdentityCardDocumentUpload } from './components/IdentityCardDocumentUpload';
+import { NIMCSlipDocumentUpload } from './components/NIMCSlipDocumentUpload';
 import { PassportDocumentUpload } from './components/PassportDocumentUpload';
 
 const ManualDocumentUpload = () => {
@@ -8,7 +11,13 @@ const ManualDocumentUpload = () => {
 
     if (selectedDocument === 'passport') {
         return <PassportDocumentUpload />;
-    } //... other document types
+    } else if (selectedDocument === 'driving-license') {
+        return <DrivingLicenseDocumentUpload />;
+    } else if (selectedDocument === 'identity-card') {
+        return <IdentityCardDocumentUpload />;
+    } else if (selectedDocument === 'nimc-slip') {
+        return <NIMCSlipDocumentUpload />;
+    }
 
     return <DocumentSelection setSelectedDocument={setSelectedDocument} />;
 };

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelection/DocumentSelection.scss

@@ -1,13 +1,28 @@
 .wallets-document-selection {
     display: flex;
-    padding-top: 3.2rem;
+    width: 99.6rem;
+    height: 50rem;
     flex-direction: column;
-    align-items: self-start;
-    justify-content: center;
-    gap: 1.9rem;
-    width: 67.5rem;
+    align-items: center;
+    flex-shrink: 0;
 
     @include mobile {
-        width: 32.8rem;
+        width: 100%;
+        height: auto;
+        padding: 1.6rem;
+    }
+
+    &__content {
+        display: flex;
+        padding-top: 3.2rem;
+        flex-direction: column;
+        align-items: self-start;
+        justify-content: center;
+        gap: 1.9rem;
+        width: 67.5rem;
+
+        @include mobile {
+            width: 32.8rem;
+        }
     }
 }

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/components/DocumentSelection/DocumentSelection.tsx

@@ -14,22 +14,24 @@ const DocumentSelection: React.FC<TProps> = ({ setSelectedDocument }) => {
 
     return (
         <div className='wallets-document-selection'>
-            <WalletText>Please upload one of the following documents:</WalletText>
-            {documentTypes.map(({ countries, description, icon, title, value }) => {
-                if (countries && !countries.includes(data?.country_code ?? '')) {
-                    return null;
-                }
-                return (
-                    <DocumentSelectionCard
-                        description={description}
-                        icon={icon}
-                        key={`document-card-${value}`}
-                        onClick={setSelectedDocument}
-                        title={title}
-                        value={value}
-                    />
-                );
-            })}
+            <div className='wallets-document-selection__content'>
+                <WalletText>Please upload one of the following documents:</WalletText>
+                {documentTypes.map(({ countries, description, icon, title, value }) => {
+                    if (countries && !countries.includes(data?.country_code ?? '')) {
+                        return null;
+                    }
+                    return (
+                        <DocumentSelectionCard
+                            description={description}
+                            icon={icon}
+                            key={`document-card-${value}`}
+                            onClick={setSelectedDocument}
+                            title={title}
+                            value={value}
+                        />
+                    );
+                })}
+            </div>
         </div>
     );
 };

packages/wallets/src/features/accounts/screens/ManualDocumentUpload/constants.tsx

@@ -23,7 +23,7 @@ export const documentTypes: TDocumentType[] = [
         description: 'Upload the front and back of your driving licence.',
         icon: DrivingLicenseIcon,
         title: 'Driving licence',
-        value: 'driver-license',
+        value: 'driving-license',
     },
     {
         description: 'Upload the front and back of your identity card.',

packages/wallets/src/features/cfd/flows/Verification/Verification.tsx

@@ -1,31 +1,17 @@
 import React, { FC, useMemo } from 'react';
 import * as Yup from 'yup';
-import { useAuthentication, usePOA, usePOI } from '@deriv/api';
+import { useAuthentication, usePOA, usePOI, useSettings } from '@deriv/api';
 import { ModalStepWrapper, WalletButton } from '../../../../components/Base';
 import { FlowProvider, TFlowProviderContext } from '../../../../components/FlowProvider';
 import { Loader } from '../../../../components/Loader';
 import { useModal } from '../../../../components/ModalProvider';
 import { THooks } from '../../../../types';
-import { ResubmitPOA } from '../../../accounts/screens';
+import { ManualDocumentUpload, ResubmitPOA } from '../../../accounts/screens';
 import { IDVDocumentUpload } from '../../../accounts/screens/IDVDocumentUpload';
+import { PersonalDetails } from '../../../accounts/screens/PersonalDetails';
+import { MT5PasswordModal } from '../../modals';
 import { Onfido } from '../../screens';
 
-const Manual = () => {
-    return (
-        <div style={{ fontSize: 60, height: 400, width: 600 }}>
-            <h1>Manual screen</h1>
-        </div>
-    );
-};
-
-const PersonalDetails = () => {
-    return (
-        <div style={{ fontSize: 60, height: 400, width: 600 }}>
-            <h1>Personal details screen</h1>
-        </div>
-    );
-};
-
 const Loading = () => {
     return (
         <div style={{ height: 400, width: 600 }}>
@@ -34,17 +20,12 @@ const Loading = () => {
     );
 };
 
-const Password = () => {
-    return <div style={{ fontSize: 60, height: 400, width: 600 }}>Password screen</div>;
-};
-
 // TODO: Replace these mock components with the screens
 const screens = {
     idvScreen: <IDVDocumentUpload />,
     loadingScreen: <Loading />,
-    manualScreen: <Manual />,
+    manualScreen: <ManualDocumentUpload />,
     onfidoScreen: <Onfido />,
-    passwordScreen: <Password />,
     personalDetailsScreen: <PersonalDetails />,
     poaScreen: <ResubmitPOA />,
 };
@@ -57,41 +38,44 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
     const { data: poiStatus, isSuccess: isSuccessPOIStatus } = usePOI();
     const { data: poaStatus, isSuccess: isSuccessPOAStatus } = usePOA();
     const { data: authenticationData } = useAuthentication();
-    const { hide } = useModal();
+    const { data: getSettings } = useSettings();
+    const { getModalState, hide, show } = useModal();
+
+    const selectedMarketType = getModalState('marketType') || 'all';
+    const platform = getModalState('platform') || 'mt5';
 
     const isLoading = useMemo(() => {
         return !isSuccessPOIStatus || !isSuccessPOAStatus;
     }, [isSuccessPOIStatus, isSuccessPOAStatus]);
 
     const hasAttemptedPOA = poaStatus?.has_attempted_poa || true;
-    const needPersonalDetails = true;
 
     const initialScreenId: keyof typeof screens = useMemo(() => {
         const service = (poiStatus?.current?.service || 'manual') as keyof THooks.POI['services'];
 
-        if (poiStatus?.services) {
-            const serviceStatus = poiStatus.services?.[service];
+        if (poiStatus?.services && isSuccessPOIStatus) {
+            const serviceStatus = poiStatus.current.status;
 
             if (!isSuccessPOIStatus) return 'loadingScreen';
+
             if (serviceStatus === 'pending' || serviceStatus === 'verified') {
                 if (authenticationData?.is_poa_needed && !hasAttemptedPOA) return 'poaScreen';
-                if (needPersonalDetails) return 'personalDetailsScreen';
-                return 'passwordScreen';
+                if (!getSettings?.has_submitted_personal_details) return 'personalDetailsScreen';
+                show(<MT5PasswordModal marketType={selectedMarketType} platform={platform} />);
             }
             if (service === 'idv') return 'idvScreen';
             if (service === 'onfido') return 'onfidoScreen';
-            return 'manualScreen';
         }
         return 'loadingScreen';
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        hasAttemptedPOA,
-        needPersonalDetails,
-        authenticationData?.is_poa_needed,
         poiStatus,
-        poiStatus?.services,
-        poiStatus?.current?.service,
         isSuccessPOIStatus,
+        authenticationData?.is_poa_needed,
+        hasAttemptedPOA,
+        getSettings?.has_submitted_personal_details,
+        show,
+        selectedMarketType,
+        platform,
     ]);
 
     const isNextDisabled = ({ currentScreenId, formValues }: TFlowProviderContext<typeof screens>) => {
@@ -112,17 +96,17 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
         if (['idvScreen', 'onfidoScreen', 'manualScreen'].includes(currentScreenId)) {
             if (hasAttemptedPOA) {
                 switchScreen('poaScreen');
-            } else if (needPersonalDetails) {
+            } else if (!getSettings?.has_submitted_personal_details) {
                 switchScreen('personalDetailsScreen');
             } else {
-                switchScreen('passwordScreen');
+                show(<MT5PasswordModal marketType={selectedMarketType} platform={platform} />);
             }
         } else if (currentScreenId === 'poaScreen') {
-            if (needPersonalDetails) {
+            if (!getSettings?.has_submitted_personal_details) {
                 switchScreen('personalDetailsScreen');
             }
         } else if (currentScreenId === 'personalDetailsScreen') {
-            switchScreen('passwordScreen');
+            show(<MT5PasswordModal marketType={selectedMarketType} platform={platform} />);
         } else {
             hide();
         }
@@ -134,6 +118,7 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
         documentNumber: Yup.string().min(12, 'document number should have minimum 12 characters').required(),
         firstName: Yup.string().min(1).max(5).required(),
         lastName: Yup.string().min(1).max(20).required(),
+        townCityLine: Yup.string().min(5).max(20).required(),
     });
 
     return (

packages/wallets/src/features/cfd/modals/JurisdictionModal/JurisdictionModal.tsx

@@ -5,6 +5,7 @@ import { useModal } from '../../../../components/ModalProvider';
 import useDevice from '../../../../hooks/useDevice';
 import { DynamicLeverageContext } from '../../components/DynamicLeverageContext';
 import { MarketTypeDetails } from '../../constants';
+import { Verification } from '../../flows/Verification';
 import { DynamicLeverageScreen, DynamicLeverageTitle } from '../../screens/DynamicLeverage';
 import { JurisdictionScreen } from '../../screens/Jurisdiction';
 import { MT5PasswordModal } from '..';
@@ -30,13 +31,21 @@ const JurisdictionModal = () => {
 
     const jurisdictionTitle = `Choose a jurisdiction for your Deriv MT5 ${title} account`;
 
+    const JurisdictionFlow = () => {
+        if (selectedJurisdiction === 'svg') {
+            return <MT5PasswordModal marketType={marketType} platform={platform} />;
+        }
+
+        return <Verification selectedJurisdiction={selectedJurisdiction} />;
+    };
+
     const modalFooter = isDynamicLeverageVisible
         ? undefined
         : () => (
               <WalletButton
                   disabled={!selectedJurisdiction || (selectedJurisdiction !== 'svg' && !isCheckBoxChecked)}
                   isFullWidth={isMobile}
-                  onClick={() => show(<MT5PasswordModal marketType={marketType} platform={platform} />)}
+                  onClick={() => show(<JurisdictionFlow />)}
                   text='Next'
               />
           );