Fix User can not validate an account in Desktop app

src/CONST.js

@@ -1086,6 +1086,10 @@ const CONST = {
         MENTION_REPLACER: /^@[^\n\r]*?(?=$|\s)/,
 
         MERGED_ACCOUNT_PREFIX: /^(MERGED_\d+@)/,
+
+        ROUTES: {
+            VALIDATE_LOGIN: /\/v($|(\/\/*))/,
+        },
     },
 
     PRONOUNS: {

src/components/DeeplinkWrapper/DeeplinkRedirectLoadingIndicator.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import TextLink from '../TextLink';
+import Text from '../Text';
+import Icon from '../Icon';
+import * as Illustrations from '../Icon/Illustrations';
+import * as Expensicons from '../Icon/Expensicons';
+import colors from '../../styles/colors';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+
+const propTypes = {
+    openLinkInBrowser: PropTypes.func.isRequired,
+
+    ...withLocalizePropTypes,
+};
+
+const DeeplinkRedirectLoadingIndicator = (props) => (
+    <View style={styles.deeplinkWrapperContainer}>
+        <View style={styles.deeplinkWrapperMessage}>
+            <View style={styles.mb2}>
+                <Icon
+                    width={200}
+                    height={164}
+                    src={Illustrations.RocketBlue}
+                />
+            </View>
+            <Text style={[styles.textHeadline, styles.textXXLarge]}>{props.translate('deeplinkWrapper.launching')}</Text>
+            <View style={[styles.mt2, styles.fontSizeNormal, styles.textAlignCenter]}>
+                <Text>{props.translate('deeplinkWrapper.redirectedToDesktopApp')}</Text>
+                <Text>
+                    {props.translate('deeplinkWrapper.youCanAlso')} <TextLink onPress={props.openLinkInBrowser}>{props.translate('deeplinkWrapper.openLinkInBrowser')}</TextLink>.
+                </Text>
+            </View>
+        </View>
+        <View style={styles.deeplinkWrapperFooter}>
+            <Icon
+                width={154}
+                height={34}
+                fill={colors.green}
+                src={Expensicons.ExpensifyWordmark}
+            />
+        </View>
+    </View>
+);
+
+DeeplinkRedirectLoadingIndicator.propTypes = propTypes;
+DeeplinkRedirectLoadingIndicator.displayName = 'DeeplinkRedirectLoadingIndicator';
+
+export default withLocalize(DeeplinkRedirectLoadingIndicator);

src/components/DeeplinkWrapper/index.website.js

@@ -8,6 +8,7 @@ import CONFIG from '../../CONFIG';
 import * as Browser from '../../libs/Browser';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as Authentication from '../../libs/Authentication';
+import DeeplinkRedirectLoadingIndicator from './DeeplinkRedirectLoadingIndicator';
 
 const propTypes = {
     /** Children to render. */
@@ -37,8 +38,10 @@ class DeeplinkWrapper extends PureComponent {
         this.state = {
             appInstallationCheckStatus:
                 this.isMacOSWeb() && CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.DEV ? CONST.DESKTOP_DEEPLINK_APP_STATE.CHECKING : CONST.DESKTOP_DEEPLINK_APP_STATE.NOT_INSTALLED,
+            shouldOpenLinkInBrowser: false,
         };
         this.focused = true;
+        this.openLinkInBrowser = this.openLinkInBrowser.bind(this);
     }
 
     componentDidMount() {
@@ -118,11 +121,24 @@ class DeeplinkWrapper extends PureComponent {
         return !Browser.isMobile() && typeof navigator === 'object' && typeof navigator.userAgent === 'string' && /Mac/i.test(navigator.userAgent) && !/Electron/i.test(navigator.userAgent);
     }
 
+    openLinkInBrowser() {
+        this.setState({shouldOpenLinkInBrowser: true});
+    }
+
+    shouldShowDeeplinkLoadingIndicator() {
+        const routeRegex = new RegExp(CONST.REGEX.ROUTES.VALIDATE_LOGIN);
+        return routeRegex.test(window.location.pathname);
+    }
+
     render() {
         if (this.state.appInstallationCheckStatus === CONST.DESKTOP_DEEPLINK_APP_STATE.CHECKING) {
             return <FullScreenLoadingIndicator style={styles.flex1} />;
         }
 
+        if (this.state.appInstallationCheckStatus === CONST.DESKTOP_DEEPLINK_APP_STATE.INSTALLED && this.shouldShowDeeplinkLoadingIndicator() && !this.state.shouldOpenLinkInBrowser) {
+            return <DeeplinkRedirectLoadingIndicator openLinkInBrowser={this.openLinkInBrowser} />;
+        }
+
         return this.props.children;
     }
 }

src/languages/en.js

@@ -170,6 +170,9 @@ export default {
         launching: 'Launching Expensify',
         expired: 'Your session has expired.',
         signIn: 'Please sign in again.',
+        redirectedToDesktopApp: "We've redirected you to the desktop app.",
+        youCanAlso: 'You can also',
+        openLinkInBrowser: 'open this link in your browser',
     },
     validateCodeModal: {
         successfulSignInTitle: 'Abracadabra,\nyou are signed in!',

src/languages/es.js

@@ -169,6 +169,9 @@ export default {
         launching: 'Cargando Expensify',
         expired: 'Tu sesión ha expirado.',
         signIn: 'Por favor, inicia sesión de nuevo.',
+        redirectedToDesktopApp: 'Te hemos redirigido a la aplicación de escritorio.',
+        youCanAlso: 'También puedes',
+        openLinkInBrowser: 'abrir este enlace en tu navegador',
     },
     validateCodeModal: {
         successfulSignInTitle: 'Abracadabra,\n¡sesión iniciada!',