Fix App show error when open unlink in Desktop App

src/CONST.js

@@ -1212,6 +1212,7 @@ const CONST = {
 
         ROUTES: {
             VALIDATE_LOGIN: /\/v($|(\/\/*))/,
+            UNLINK_LOGIN: /\/u($|(\/\/*))/,
         },
     },
 

src/components/DeeplinkWrapper/index.website.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import {useEffect} from 'react';
 import Str from 'expensify-common/lib/str';
+import _ from 'underscore';
 import * as Browser from '../../libs/Browser';
 import ROUTES from '../../ROUTES';
 import * as App from '../../libs/actions/App';
@@ -18,7 +19,13 @@ function isMacOSWeb() {
 
 function DeeplinkWrapper({children}) {
     useEffect(() => {
-        if (!isMacOSWeb() || CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
+        // According to the design, we don't support unlink in Desktop app https://github.com/Expensify/App/issues/19681#issuecomment-1610353099
+        const isUnsupportedDeeplinkRoute = _.some([CONST.REGEX.ROUTES.UNLINK_LOGIN], (unsupportRouteRegex) => {
+            const routeRegex = new RegExp(unsupportRouteRegex);
+            return routeRegex.test(window.location.pathname);
+        });
+
+        if (!isMacOSWeb() || isUnsupportedDeeplinkRoute || CONFIG.ENVIRONMENT === CONST.ENVIRONMENT.DEV) {
             return;
         }
 

src/pages/UnlinkLoginPage.js

@@ -1,31 +1,60 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
+import {withOnyx} from 'react-native-onyx';
 import {propTypes as validateLinkPropTypes, defaultProps as validateLinkDefaultProps} from './ValidateLoginPage/validateLinkPropTypes';
 import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 import Navigation from '../libs/Navigation/Navigation';
 import * as Session from '../libs/actions/Session';
 import ROUTES from '../ROUTES';
+import usePrevious from '../hooks/usePrevious';
+import ONYXKEYS from '../ONYXKEYS';
 
 const propTypes = {
     /** The accountID and validateCode are passed via the URL */
     route: validateLinkPropTypes,
+
+    /** The details about the account that the user is signing in with */
+    account: PropTypes.shape({
+        /** Whether a sign is loading */
+        isLoading: PropTypes.bool,
+    }),
 };
 
 const defaultProps = {
     route: validateLinkDefaultProps,
+    account: {
+        isLoading: false,
+    },
 };
 
 function UnlinkLoginPage(props) {
     const accountID = lodashGet(props.route.params, 'accountID', '');
     const validateCode = lodashGet(props.route.params, 'validateCode', '');
+    const prevIsLoading = usePrevious(props.account.isLoading);
+
+    useEffect(() => {
+        Session.unlinkLogin(accountID, validateCode);
+        // We only want this to run on mount
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        // Only navigate when the unlink login request is completed
+        if (!prevIsLoading || props.account.isLoading) {
+            return;
+        }
+
+        Navigation.navigate(ROUTES.HOME);
+    }, [prevIsLoading, props.account.isLoading]);
 
-    Session.unlinkLogin(accountID, validateCode);
-    Navigation.navigate(ROUTES.HOME);
     return <FullScreenLoadingIndicator />;
 }
 
 UnlinkLoginPage.propTypes = propTypes;
 UnlinkLoginPage.defaultProps = defaultProps;
 UnlinkLoginPage.displayName = 'UnlinkLoginPage';
 
-export default UnlinkLoginPage;
+export default withOnyx({
+    account: {key: ONYXKEYS.ACCOUNT},
+})(UnlinkLoginPage);