Matin/ Hirad/ Amina/ Maryia-task_push_labuan_bvi_vanuatu (#5697)

* Added add account buttons

* Fixed add button issues

* Added disabled

* feat: sorry amina

* Changed the condition of add account button

* Added condition for add account

* Renamed add account button and fixes its condition

* Revert "feat: sorry amina"

This reverts commit ca7bc6c.

* Fixed the undefined issue in disabled cards

* Fixed the issue of undefined data

* Added condition for failed POI and POA

* Maryia/Fix: for tests and add buttons (#15)

* Maryia/fix for tests and account buttons

* Fix: removed duplication for ModalCheckbox

* poa_error_msg

* Changed the conditions of POI and POA failed

* Pulled from master

* Added conditional modal button function

* Maryia/fix: jurisdiction modal next button enabling (#16)

* Maryia/fix: jurisdiction modal next buton enabling

* refactoring

* Fixed buttonText conditions

* Chore: MT5 Trade Modal implementation

* Maryia/used local state for setting selected card & updated flow (#17)

* Maryia/used local state for setting selected card & updated flow

* fix: for tests

* Added the compare accounts add button integration

* Pulled from master

* Added box shadow hover to jurisdiction card

* Chore: Account signup flow improvement

* Chore: code cleanup

* Fixed some of the stylings of MT5 cards

* Fixed the mobile banner issue

* Maryia/Fix: CFDPersonalDetails styles & logics + refactoring (#18)

* Maryia/Fix: synthetic flow + refactoring

* Maryia/Fix: CFDPersonalDetails styles + refactoring

* Maryia/Fix: for Labuan footnote to not appear when pending status is visible

* Chore: small bug fixes

* Added three new conditions for modal footnote

* Pulled from master

* Maryia/fix: quick fix for failed & pending statuses (#19)

* fix for pending statuses

* showing status when the card is selected

* quick fix for poi/poa failed statuses & footnotes

* Maryia/used shortcode + updated mt5_new_account request & cfd personal account modal (#20)

* Maryia/used shortcode + updated mt5_new_account request & cfd personal account modal

* commented out personal details form tests temporarily

* Revert "Maryia/used shortcode + updated mt5_new_account request & cfd personal account modal (#20)" (#21)

This reverts commit 05bd322.

* Maryia/used shortcode + updated mt5_new_account request (#23)

* Maryia/using shortcode + mt5_new_account request + updated cfd personal account modal

* commented out personal details form tests temporarily

* revert personal details form

* revert tests for cfd personal detail form

* revert cfd personal details modal

* revert prop types

* prevent memory leak in cfd personal details modal

* Chore: update jurisdiction cards style

* Chore: Fixed bug on CFD card banners

* Fixed poa failed and poi failed conditions

* Changed is pending footnote condition

* Maryia/fix: next button for failed+pending (#24)

* Fixed the texts of jurisdiction cards

* style fix for poi-poa

* style fix for poi-poa

* Added condition for Account added

* maltainvest

* Finished DXTrade styling

* Pulled from main branch

* Maryia/fix: state for failed+none (#25)

* Maryia/fix: state for failed+none

* getting settings in jurisdiction modal to check if the client has already submitted personal details

* fix: statuses for failed + none

* Fixes some styling issues

* Fixed some stylings

* Fixed paddings of verification statuses

* Chore: Fix trade modal heading title

* Fixes some of our issues

* Maryia/fix: jurisdiction modal styles & open account request (financial flow check) (#26)

* Maryia/fix: tnc agreement footnote

* Maryia/fixed styles & added more data to open account request

* fix: remove used classname

* Chore: Fix logged out MT5 dashboard bug

* Chore: Hide adding account from compare accounts modal when logged out

* Chore: Huawei appgallery - CFD dashboard style updates

* Chore: Huawei on mobile

* Chore: Fix a tiny bug

* Added seperator to the modal footer

* Fixed console warning issues

* Maryia/Merged from master & resolved conflicts + small style fix for dmt5 dashboard (#27)

* Niloofar / Indicators documentation review (#5825)

* indicators documentation review

* resolved review comment

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>

* Niloofar / Trader documentation review (#5792)

* edit some parts of trader docs

* remove extra information from traders docs

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>

* shayan / cfd documentation updated (#5800)

* docs/ cfd readme.md updated

* Update README.md

* docs/ Readme file updated

* docs/ readme file updated

* docs/ Update packages/cfd/README.md

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>

* docs/ Update packages/cfd/README.md

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>

* docs /Update packages/cfd/README.md

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>

* docs/ update readme file

* doc/ updated readme file

* doc/ updated readme file

* doc/ updated readme file

Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>

* yauheni / Notify users about sharing tokens with admin scope selected (#5741)

* yauheni / Notify users about sharing tokens with admin scope selected, added note

* tests fix

* created token scope styling

* deleted option test fix

* token value fild markup

* clipboard with warning dialog implemented

* responsive version done, tests refactoring

* dialog fix for admin scope

* check commit after rebuild

* css fixes, refactor after review

* svg icon fill color fix

* inline note fix

* Delete package-lock.json

* fix commit

* fix

* dots component placing fix

* dialog fixes

* api token tests fix

* css fix for token table

* review fixes

* naming fix, close delete dialog timeout deleted

* testcase fix

* localize fix

* admin note message change

* copy token hover message fix

* token alignment eye button fix

* ok button capital letters fix

* delete button hover fix, clipboard refactor

Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>

* farrah/ fixed cfd lint errors (#5607)

* ci/ exclude dist files from eslint scan

* ci/ disable spaced-comment

* ci/ exclude lib dir from eslint scan

* fixed cfd eslint errors

* renamed variables and fixed types

* fixed missing return function

* refactor code

* fixed cleanup function

* fixed invalid property document_file on submit

Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@firstsource.tech>

* yashim/feat: add TTI Measurement  (#5764)

* feat: add TTI Measurement

* fix: security error

* fix: add regex to fire only in specific domain

* chore: remove console log

* fix: remove TTI script. Offload to GTM

* chore: revert gtm loading changes

* translations: 📚 sync translations with crowdin (#5965)

Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* chore: removed unused prop from jurisdiction card

* fix for dmt5 server maintenance & download center styles

Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com>
Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>
Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com>
Co-authored-by: yauheni-kryzhyk-deriv <103182683+yauheni-kryzhyk-deriv@users.noreply.github.com>
Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@firstsource.tech>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>

* eu-cfd-modal

* Fixed compare accounts modal account creation issues

* Added financial in front of the malatinvest for Adding account

* Maryia/updated t&c links and improved jurisdiction modal (#29)

* modal

* modal- style

* add account fix

* Chore: hide compare accounts button

* Chore: Display all MT5 accounts created

* vanuatu-only-onfido

* Fixed the issue where modal goes to the left

* banner condition changes

* Fixed the issue where selected card was showing wrong data

* Pulled from main branch

* Fixed the real mt5 account top up button issue

* onfido failed

* Fixed existing financial_stp account not being shown

* real-account-under-virtual deriv

* Increased the delay before closing and opening of modals

* Fixed the sliding of the compare accounts modal

* Account transfer will show the landing company to the end of accounts name

* Added some more timeout function to prevent sliding modal to the left

* Added timeout for all of toggle modals

* Fixed POI acknowledged issue

* Fixed can have more real synthetic mt5 condition to hide add account button if we do not have any more accounts to create

* notifications

* remove duplicate notifications

* Changed the styling of disabled account

* Made banners text capitalization exactly like the design

* Account switcher add button won't show up when we cannot create anymore accounts

* Maryia/fix: showing only available accounts in CompareAccountsModal (#30)

* Maryia/fix: showing only available accounts in CompareAccountsModal

* fix: getting complete content for all available accounts + removed unused has_cfd_account

* Maryia/finalized CompareAccountsModal table

* Merge branch master of github.com:binary-com/deriv-app into task_push_labuan_bvi_vanuatu

* cfd-personal-details

* Chore: JY's requests reflected.

* Maryia/Refactor: compare account modal content + improvements (#32)

* Maryia/refactoring compare accounts modal content

* added a case for 0 financial or 0 synthetic accounts count

* improved synthetic & financial header style loop

* Chore: cfd card height update

* svg routing

* Added new conditions for add account button

* Fixed the capital letter demonstration of SVG and BVI banner texts

* Fixed the TTradingPlatfromAvailabeAccount Type

* Fixed CodeCov error

* svg routing

* Fixed labuan account creation bug

* Fixed Code Cov errors

* Fixed demo account dashboard error and hid the add button for it

* compare account fix

* compare account fix

* poi-poa-mobile-style-fixes

* Changed over header color

* Fixed the issue where server name was shown for BVI, Labuan and ...

* Fixed compare accounts account creation flow

* Added new styling for demo accounts

* poa-fix

* Added login id to demo accounts

* Fixed the account transfer text upper and lower cases

* account swtcher fix

* region in account switcher

* overheader change in jurisdiction

* Fixed eu password manager modal header title

* Fixed eu user cfd icon color and trading account label

* Fixed the add account buttun issue where having more than one account with same landing_company_shortcode hides the button

* Fixed the redirected account to reset password errors

* Fixed demo accounts backward compatibility

* Fixed EU demo account text in account switcher

* Chore: Resolve SonarCloud bug

* server name for account switcher

* server name for account switcher

* Fixed account switcher bug which shows add button even when we have accounts created

* revert-last commit

* Fixed the issue where add button in account switcher was shown even after having all of the accounts created

* Chore: login id padding issues fixed for Demo

* Chore: Small padding update for Labuan clients

* Fixed derivx account name in cashier transfer

* tnc fix

* Fixed POIPOA submited text

* remove equities

* Fixed the checkbox issue in mobile mode

* Fixed account switcher issues

* labuan -compare-accounts-modal-content-update

* Fixed the font size of Proof of identity and address are required in verification statuses

* Changed the straight through processing text style

* Fixed account switcher bug

* fix in tnc checkbox

* Consolidated the responsive design

* separator line in demo account switcher

* Maryia/Fixed modals sliding to the left using styles

* compare modal

* Fixed the issue of account switcher for backward compatibility

* Fixed the mt5-trade-modal title for eu users

* Chore: added tooltip info to jurisdiction modal for Financial Labuan account

* fix loading

* Fixed the grammatical issue of MT5 server maintenance message

* Fixed mt5 trade modal header title for eu accounts

* compare account fix

* compare accout fix

* Added malta invest footnote

* Fixed the text color of one of jurisdiction footnotes

* Maryia/fix: add buttons + accounts switcher + only svg available to add in demo (#35)

* Maryia/fix: add buttons + accounts switcher + only svg available for demo

* showing company shortcode for added demo accounts

* show company shortcode in demo only for financial labuan

* fix: setting company code for demo account opening request

* fix for tests

* Fixed the issue where jurisdiction cards were linked in responsive design

* Fixed sonar cloud issue

* Sonar cloud fix

* Fixed sonar cloud issue

* Sonar cloud issue

* Maryia/fix: sliding trade modal & compare accounts modal (#36)

* Sonar cloud issue

* Checking sonar cloud issue

* Fixed MT5 success dialog icon

* Maryia/fix add buttons for multiple real accounts

* Fixed server tag for account switcher

* Maryia/fix: CompareAccountsModal Add button to open real account needed modal (#37)

* Maryia/fix showing real acc needed when adding acc from compare acc modal

* fixed compare accounts modal for logged out clients

* removed unused loading state from poi/poa

* vanuatu flow from compare accounts modal

* Maryia/fix: console TS warning for exit_classname type

* Fix: Display popovers on top of Trade modal

* Fixed the issue where server name was shown for bvi accounts as well

* Maryia/fix: setting account type in compare accounts modal

* next button logic

* vanuatu flow

* Fix: title update and css changes

* app crash issue

* vanuatu banner and next button labels

* Fixed the issue where server banner was shown even for accounts with 1 synthetic svg account in account switcher

* onfido blank screen check

* Maryia/fix: avoided state update on unmounted CFDFinancialStpRealAccountSignup + removed unused setSubmitting

* fix for loading

* mt5 add g

* Maryia/fix: Trade modal for demo to display only STP shortcode

* update branch with master

* typo fix

* checkbox missing issue

* maltainvest

* Maryia/fix: responsive CompareAccountsModal

* code cleanup in packages/account/src/Components/poi-poa-docs-submitted

Co-authored-by: hirad-rework <hirad@re-work.dev>
Co-authored-by: yashim-deriv <yashim@deriv.com>
Co-authored-by: Yashim Wong <75345074+yashim-deriv@users.noreply.github.com>
Co-authored-by: Maryia <103177211+maryia-binary@users.noreply.github.com>
Co-authored-by: Matin-binary <matin@deriv.com>
Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com>
Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com>
Co-authored-by: yauheni-kryzhyk-deriv <103182683+yauheni-kryzhyk-deriv@users.noreply.github.com>
Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”>
Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>
Co-authored-by: Ali(Ako) Hosseini <ali.hosseini@firstsource.tech>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>
Co-authored-by: maryia-binary <maryia@binary.com>
Co-authored-by: Matin shafiei <matin@binary.com>

packages/account/build/webpack.config.js

@@ -55,6 +55,11 @@ module.exports = function (env) {
             'text-container': 'Components/text-container',
             'terms-of-use': 'Components/terms-of-use',
             'terms-of-use-config': 'Configs/terms-of-use-config',
+            'proof-of-identity-config': 'Configs/proof-of-identity-config',
+            'proof-of-identity-form-on-signup': 'Components/poi/poi-form-on-signup',
+            'proof-of-identity-containerfor-mt5':
+                'Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5',
+            'poi-poa-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx',
         },
         mode: IS_RELEASE ? 'production' : 'development',
         module: {

packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button, Icon, Text } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import IconMessageContent from 'Components/icon-message-content';
+
+const PoiPoaSubmitted = ({ onClickOK, onClickYes, account_type, mt5_login_list, is_eu }) => {
+    const [should_show_svg_msg, setShouldShowSvgMsg] = React.useState(false);
+    const message = localize('Your documents were submitted successfully');
+    React.useEffect(() => {
+        if (account_type.type && account_type.category && !is_eu) {
+            const svg_accounts = mt5_login_list.filter(
+                data =>
+                    data.market_type === account_type.type &&
+                    data.landing_company_short === 'svg' &&
+                    data.account_type === 'real'
+            );
+            if (!svg_accounts.length) {
+                setShouldShowSvgMsg(true);
+            }
+        }
+    }, []);
+    const SVGRoutingData = () => (
+        <>
+            <Text size='xs' align='center' className='poi-poa-submitted__svg-text'>
+                {localize('Meanwhile, do you want to explore other accounts?')}
+            </Text>
+            <div className='poi-poa-submitted__svg-footer'>
+                <Button has_effect text={localize('No')} onClick={onClickOK} secondary />
+                <Button has_effect text={localize('Yes')} onClick={onClickYes} secondary />
+            </div>
+        </>
+    );
+    return (
+        <IconMessageContent
+            message={message}
+            text={localize('We’ll review your documents and notify you of its status within 1 to 3 days.')}
+            icon={<Icon icon='IcDocsSubmit' size={128} />}
+            className='poi-poa-submitted'
+        >
+            {should_show_svg_msg ? (
+                <SVGRoutingData />
+            ) : (
+                <Button has_effect text={localize('OK')} onClick={onClickOK} primary />
+            )}
+        </IconMessageContent>
+    );
+};
+export default PoiPoaSubmitted;

packages/account/src/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/index.js

@@ -0,0 +1,3 @@
+import { IdvDocSubmitOnSignup } from './idv-doc-submit-on-signup.jsx';
+
+export default IdvDocSubmitOnSignup;

packages/account/src/Components/poi/poi-form-on-signup/index.js

@@ -0,0 +1,3 @@
+import { ProofOfIdentityFormOnSignup } from './poi-form-on-signup.jsx';
+
+export default ProofOfIdentityFormOnSignup;

packages/account/src/Components/poi/poi-form-on-signup/poi-form-on-signup.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IdvDocSubmitOnSignup from './idv-doc-submit-on-signup';
+
+export const ProofOfIdentityFormOnSignup = ({
+    getCurrentStep,
+    goToPreviousStep,
+    goToNextStep,
+    onCancel,
+    onSave,
+    onSubmit,
+    value,
+    residence_list,
+    citizen,
+}) => {
+    const citizen_data = residence_list.find(residence => residence.value === citizen);
+
+    const handleSubmit = (values, actions) => {
+        onSubmit(getCurrentStep() - 1, values, actions.setSubmitting, goToNextStep);
+    };
+
+    const handleCancel = values => {
+        const current_step = getCurrentStep() - 1;
+        onSave(current_step, values);
+        onCancel(current_step, goToPreviousStep);
+    };
+    return (
+        <IdvDocSubmitOnSignup
+            citizen_data={citizen_data}
+            value={value}
+            has_previous={true}
+            onPrevious={handleCancel}
+            onNext={handleSubmit}
+        />
+    );
+};
+
+ProofOfIdentityFormOnSignup.propTypes = {
+    onCancel: PropTypes.func,
+    onSave: PropTypes.func,
+    onSubmit: PropTypes.func,
+    value: PropTypes.object,
+    getCurrentStep: PropTypes.func,
+    goToPreviousStep: PropTypes.func,
+    goToNextStep: PropTypes.func,
+    residence_list: PropTypes.arrayOf(PropTypes.object),
+    citizen: PropTypes.string,
+};

packages/account/src/Configs/proof-of-identity-config.js

@@ -0,0 +1,15 @@
+import { localize } from '@deriv/translations';
+
+const proofOfIdentityConfig = ({ account_settings }, ProofOfIdentityForm) => {
+    return {
+        header: {
+            active_title: localize('Identity information'),
+            title: localize('Identity information'),
+        },
+        body: ProofOfIdentityForm,
+        props: { citizen: account_settings.citizen || account_settings.country_code },
+        passthrough: ['refreshNotifications', 'residence_list'],
+    };
+};
+
+export default proofOfIdentityConfig;

packages/account/src/Sections/Security/TwoFactorAuthentication/two-factor-authentication.jsx

@@ -116,7 +116,7 @@ const TwoFactorAuthentication = ({
                         <Timeline.Item
                             item_title={
                                 <Localize
-                                    i18n_default_text='Scan the QR code below with your 2FA app. We recommend <0>Authy</0> or <1>Google Authenticator</1>. We do not support <2>Duo Mobile</2>.'
+                                    i18n_default_text='Scan the QR code below with your 2FA app. We recommend <0>Authy</0> or <1>Google Authenticator</1>.'
                                     components={[
                                         <a
                                             className='link two-factor__link'
@@ -132,13 +132,6 @@ const TwoFactorAuthentication = ({
                                             rel='noopener noreferrer'
                                             key={1}
                                         />,
-                                        <a
-                                            className='link two-factor__link'
-                                            href='https://help.duo.com/s/article/2112?language=en_US'
-                                            target='_blank'
-                                            rel='noopener noreferrer'
-                                            key={2}
-                                        />,
                                     ]}
                                 />
                             }

packages/account/src/Sections/Verification/Helpers/verification.js

@@ -18,6 +18,14 @@ export const populateVerificationStatus = account_status => {
     const identity_last_attempt = attempts.latest;
     const has_attempted_idv = !!(attempts.history.length && attempts.history.find(h => h.service === 'idv'));
 
+    const onfido_status = account_status.authentication?.identity?.services?.onfido?.status;
+    const manual_status = account_status.authentication?.identity?.services?.manual?.status;
+    const acknowledged_status = ['pending', 'verified'];
+    const poi_acknowledged_for_vanuatu =
+        (onfido_status && acknowledged_status.includes(onfido_status)) ||
+        (manual_status && acknowledged_status.includes(manual_status));
+
+    const need_poi_for_vanuatu = !poi_acknowledged_for_vanuatu;
     return {
         allow_document_upload,
         allow_poa_resubmission,
@@ -36,5 +44,6 @@ export const populateVerificationStatus = account_status => {
         needs_poi,
         needs_verification,
         onfido,
+        need_poi_for_vanuatu,
     };
 };

packages/account/src/Sections/Verification/ProofOfIdentity/onfido-sdk-view.jsx

@@ -67,6 +67,7 @@ const OnfidoSdkView = ({ country_code, documents_supported, handleViewComplete,
                 },
                 token: onfido_service_token,
                 useModal: false,
+                useMemoryHistory: true,
                 onComplete,
                 steps: [
                     {

packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Icon, Loading, Text } from '@deriv/components';
+import { WS, isMobile } from '@deriv/shared';
+import { localize } from '@deriv/translations';
+import ErrorMessage from 'Components/error-component';
+import POISubmissionForMT5 from './proof-of-identity-submission-for-mt5.jsx';
+import { service_code } from './proof-of-identity-utils';
+import { populateVerificationStatus } from '../Helpers/verification';
+
+const ShowDemoMessage = () => (
+    <div className='da-icon-with-message'>
+        <Icon icon={'IcPoaLock'} size={128} />
+        <Text
+            className='da-icon-with-message__text'
+            as='p'
+            color='general'
+            size={isMobile ? 'xs' : 's'}
+            line_height='m'
+            weight='bold'
+        >
+            {localize('This feature is not available for demo accounts.')}
+        </Text>
+    </div>
+);
+const ProofOfIdentityContainerforMt5 = ({
+    account_status,
+    fetchResidenceList,
+    height,
+    is_from_external,
+    is_switching,
+    is_virtual,
+    onStateChange,
+    refreshNotifications,
+    citizen_data,
+    jurisdiction_selected_shortcode,
+}) => {
+    const [api_error, setAPIError] = React.useState();
+    const [residence_list, setResidenceList] = React.useState();
+    const [is_status_loading, setStatusLoading] = React.useState(true);
+
+    React.useEffect(() => {
+        // only re-mount logic when switching is done
+        if (!is_switching) {
+            WS.authorized.getAccountStatus().then(response_account_status => {
+                if (response_account_status.error) {
+                    setAPIError(response_account_status.error);
+                    setStatusLoading(false);
+                    return;
+                }
+                fetchResidenceList().then(response_residence_list => {
+                    if (response_residence_list.error) {
+                        setAPIError(response_residence_list.error);
+                    } else {
+                        setResidenceList(response_residence_list.residence_list);
+                    }
+                    setStatusLoading(false);
+                });
+            });
+        }
+    }, [fetchResidenceList, is_switching]);
+
+    if (is_status_loading || is_switching) {
+        return <Loading is_fullscreen={false} />;
+    } else if (is_virtual) {
+        return <ShowDemoMessage />;
+    } else if (api_error) {
+        return <ErrorMessage error_message={api_error?.message || api_error} />;
+    }
+
+    const verification_status = populateVerificationStatus(account_status);
+    const { idv, has_attempted_idv, identity_last_attempt, is_idv_disallowed, manual, needs_poa, onfido } =
+        verification_status;
+
+    const poi_resubmission_cases = ['rejected', 'suspected', 'expired'];
+
+    const has_idv_error =
+        identity_last_attempt?.service && service_code.idv && poi_resubmission_cases.includes(idv.status);
+
+    return (
+        <POISubmissionForMT5
+            has_attempted_idv={has_attempted_idv}
+            height={height ?? null}
+            identity_last_attempt={identity_last_attempt}
+            idv={idv}
+            is_from_external={!!is_from_external}
+            is_idv_disallowed={is_idv_disallowed}
+            manual={manual}
+            needs_poa={needs_poa}
+            onfido={onfido}
+            onStateChange={onStateChange}
+            refreshNotifications={refreshNotifications}
+            residence_list={residence_list}
+            citizen_data={citizen_data}
+            has_idv_error={has_idv_error}
+            jurisdiction_selected_shortcode={jurisdiction_selected_shortcode}
+        />
+    );
+};
+
+export default ProofOfIdentityContainerforMt5;

packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission-for-mt5.jsx

@@ -0,0 +1,109 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react';
+import { WS } from '@deriv/shared';
+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 = ({
+    idv,
+    is_from_external,
+    is_idv_disallowed,
+    onfido,
+    onStateChange,
+    refreshNotifications,
+    citizen_data,
+    has_idv_error,
+    jurisdiction_selected_shortcode,
+}) => {
+    const [submission_status, setSubmissionStatus] = React.useState(); // submitting
+    const [submission_service, setSubmissionService] = React.useState();
+    React.useEffect(() => {
+        if (citizen_data) {
+            const { submissions_left: idv_submissions_left } = idv;
+            const { submissions_left: onfido_submissions_left } = onfido;
+            const is_idv_supported = citizen_data.identity.services.idv.is_country_supported;
+            const is_onfido_supported = citizen_data.identity.services.onfido.is_country_supported;
+            if (
+                is_idv_supported &&
+                Number(idv_submissions_left) > 0 &&
+                !is_idv_disallowed &&
+                jurisdiction_selected_shortcode !== 'vanuatu'
+            ) {
+                setSubmissionService(service_code.idv);
+            } else if (onfido_submissions_left && is_onfido_supported) {
+                setSubmissionService(service_code.onfido);
+            } else {
+                setSubmissionService(service_code.manual);
+            }
+            setSubmissionStatus(submission_status_code.submitting);
+        }
+    }, [citizen_data]);
+
+    const handlePOIComplete = () => {
+        if (onStateChange && typeof onStateChange === 'function') {
+            onStateChange(identity_status_codes.pending);
+        }
+        WS.authorized.getAccountStatus().then(() => {
+            refreshNotifications();
+        });
+    };
+    const handleIdvSubmit = values => {
+        const { document_number, document_type } = values;
+        const submit_data = {
+            identity_verification_document_add: 1,
+            document_number,
+            document_type: document_type.id,
+            issuing_country: citizen_data.value,
+        };
+
+        WS.send(submit_data).then(() => {
+            handlePOIComplete();
+        });
+    };
+
+    if (submission_status === submission_status_code.submitting) {
+        switch (submission_service) {
+            case service_code.idv:
+                return (
+                    <IdvDocSubmitOnSignup
+                        citizen_data={citizen_data}
+                        onNext={handleIdvSubmit}
+                        has_idv_error={has_idv_error}
+                    />
+                );
+            case service_code.onfido: {
+                const country_code = citizen_data.value;
+                const doc_obj = citizen_data.identity.services.onfido.documents_supported;
+                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>
+                );
+            }
+            case service_code.manual:
+                return <Unsupported />;
+            default:
+                return null;
+        }
+    } else {
+        return null;
+    }
+};
+
+export default POISubmissionForMT5;