Amina/ redirection from deriv-app to Accounts OS application for POI submission

packages/account/src/Constants/routes-config.tsx

@@ -1,20 +1,20 @@
 // /* eslint-disable @typescript-eslint/ban-ts-comment */
 // // @ts-nocheck [TODO] - Need to update the types of routes
 
-import { routes, moduleLoader, makeLazyLoader } from '@deriv/shared';
+import { Loading } from '@deriv/components';
+import { makeLazyLoader, moduleLoader, routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
+
 import {
-    PersonalDetails,
-    ProofOfIdentity,
-    ProofOfAddress,
-    ProofOfOwnership,
     Account,
     DeactivateAccount,
+    PersonalDetails,
+    ProofOfAddress,
     ProofOfIncome,
+    ProofOfOwnership,
 } from '../Sections';
-
 import { TRoute, TRouteConfig } from '../Types';
-import { Loading } from '@deriv/components';
+
 // Error Routes
 const Page404 = makeLazyLoader(
     () => moduleLoader(() => import(/* webpackChunkName: "404" */ 'Modules/Page404')),
@@ -86,6 +86,10 @@ const ClosingAccount = makeLazyLoader(
     () => moduleLoader(() => import('../Sections/Security/ClosingAccount')),
     () => <Loading />
 )();
+const ProofOfIdentityFlow = makeLazyLoader(
+    () => moduleLoader(() => import('../Sections/Verification/ProofOfIdentity/proof-of-identity-flow')),
+    () => <Loading />
+)();
 
 export type TPage404 = typeof Page404;
 
@@ -155,7 +159,7 @@ const initRoutesConfig = () => [
                 subroutes: [
                     {
                         path: routes.proof_of_identity,
-                        component: ProofOfIdentity,
+                        component: ProofOfIdentityFlow,
                         getTitle: () => localize('Proof of identity'),
                     },
                     {

packages/account/src/Sections/Verification/ProofOfIdentity/index.js

@@ -1,2 +1,3 @@
 export { default as ProofOfIdentity } from './proof-of-identity.jsx';
 export { default as ProofOfIdentityContainer } from './proof-of-identity-container.jsx';
+export { default as ProofOfIdentityFlow } from './proof-of-identity-flow';

packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-flow.tsx

@@ -0,0 +1,47 @@
+import { Loading } from '@deriv/components';
+import { useGrowthbookGetFeatureValue } from '@deriv/hooks';
+import { ACCOUNTS_OS_POI_STATUS_URL, ACCOUNTS_OS_POI_URL, getAppId, getSocketURL } from '@deriv/shared';
+import { observer, useStore } from '@deriv/stores';
+
+import { useKycAuthStatus } from '../../../hooks';
+
+import ProofOfIdentity from './proof-of-identity';
+
+const ProofOfIdentityFlow = observer(() => {
+    const {
+        client: { getToken, residence },
+    } = useStore();
+    const { kyc_auth_status } = useKycAuthStatus({ country: residence });
+    const [shouldRedirectToAccountsOSApp, isRedirectToAccountsOSAppFFLoaded] = useGrowthbookGetFeatureValue({
+        featureFlag: 'redirect_to_poi_in_accounts_os',
+    });
+
+    const getFormattedURL = url_link => {
+        const url = new URL(url_link);
+        url.searchParams.append('platform', 'deriv_app');
+        url.searchParams.append('appid', getAppId());
+        url.searchParams.append('lang', 'en');
+        url.searchParams.append('server', getSocketURL());
+        url.searchParams.append('token', getToken());
+        return url.toString();
+    };
+
+    if (isRedirectToAccountsOSAppFFLoaded) {
+        if (shouldRedirectToAccountsOSApp) {
+            if (kyc_auth_status) {
+                const { identity } = kyc_auth_status;
+                const redirect_url =
+                    identity.status === 'none' || identity.status === 'required'
+                        ? ACCOUNTS_OS_POI_URL
+                        : ACCOUNTS_OS_POI_STATUS_URL;
+                window.location.href = getFormattedURL(redirect_url);
+            }
+        } else {
+            return <ProofOfIdentity />;
+        }
+    }
+
+    return <Loading is_fullscreen={false} className='account__initial-loader' />;
+});
+
+export default ProofOfIdentityFlow;

packages/account/src/Sections/index.js

@@ -1,11 +1,12 @@
+import Account from 'Containers/Account/account';
 import PersonalDetails from 'Sections/Profile/PersonalDetails';
-import { ProofOfIdentityContainer, ProofOfIdentity } from 'Sections/Verification/ProofOfIdentity';
+import DeactivateAccount from 'Sections/Security/DeactivateAccount'; // TODO: Remove once mobile team has changed this link
 import ProofOfAddress from 'Sections/Verification/ProofOfAddress';
-import ProofOfOwnership from 'Sections/Verification/ProofOfOwnership';
+import { ProofOfIdentity, ProofOfIdentityContainer, ProofOfIdentityFlow } from 'Sections/Verification/ProofOfIdentity';
 import ProofOfIncome from 'Sections/Verification/ProofOfIncome';
-import Account from 'Containers/Account/account';
+import ProofOfOwnership from 'Sections/Verification/ProofOfOwnership';
+
 import EmploymentTaxInfo from '../Containers/employment-tax-info/employment-tax-info';
-import DeactivateAccount from 'Sections/Security/DeactivateAccount'; // TODO: Remove once mobile team has changed this link
 
 export {
     PersonalDetails,
@@ -17,4 +18,5 @@ export {
     Account,
     DeactivateAccount,
     EmploymentTaxInfo,
+    ProofOfIdentityFlow,
 };

packages/core/src/Stores/client-store.js

@@ -444,6 +444,7 @@ export default class ClientStore extends BaseStore {
             setClientKYCStatus: action.bound,
             client_kyc_status: observable,
             should_show_trustpilot_notification: computed,
+            getToken: action.bound,
         });
 
         reaction(

packages/shared/src/utils/routes/routes.ts

@@ -119,3 +119,7 @@ export const isDisabledLandscapeBlockerRoute = (path: string) => {
     if (path === routes.traders_hub) return true;
     return DISABLE_LANDSCAPE_BLOCKER_ROUTES.some(route => path.startsWith(route));
 };
+
+export const ACCOUNTS_OS_POI_URL = 'https://staging-hub.deriv.com/Accounts/ProofOfIdentity';
+export const ACCOUNTS_OS_POI_STATUS_URL = 'https://staging-hub.deriv.com/Accounts/ProofOfIdentityStatus';
+export const ACCOUNTS_OS_POA_URL = 'https://staging-hub.deriv.com/Accounts/ProofOfAddress';

packages/stores/src/mockStore.ts

@@ -335,6 +335,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             is_account_to_be_closed_by_residence: false,
             statement: {},
             should_show_trustpilot_notification: false,
+            getToken: jest.fn(),
         },
         common: {
             error: common_store_error,

packages/stores/types.ts

@@ -711,6 +711,7 @@ export type TClientStore = {
         valid_tin: 0 | 1;
     };
     should_show_trustpilot_notification: boolean;
+    getToken: () => string;
 };
 
 type TCommonStoreError = {