diff --git a/src/CONST.js b/src/CONST.js index 56102c7641f7..e4e749ce0ccf 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -1212,6 +1212,7 @@ const CONST = { ROUTES: { VALIDATE_LOGIN: /\/v($|(\/\/*))/, + UNLINK_LOGIN: /\/u($|(\/\/*))/, }, }, diff --git a/src/components/DeeplinkWrapper/index.website.js b/src/components/DeeplinkWrapper/index.website.js index 1d83f4af55f7..1f5988da3224 100644 --- a/src/components/DeeplinkWrapper/index.website.js +++ b/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; } diff --git a/src/pages/UnlinkLoginPage.js b/src/pages/UnlinkLoginPage.js index ee77bb2d2045..67c073820bc0 100644 --- a/src/pages/UnlinkLoginPage.js +++ b/src/pages/UnlinkLoginPage.js @@ -1,26 +1,53 @@ -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 ; } @@ -28,4 +55,6 @@ UnlinkLoginPage.propTypes = propTypes; UnlinkLoginPage.defaultProps = defaultProps; UnlinkLoginPage.displayName = 'UnlinkLoginPage'; -export default UnlinkLoginPage; +export default withOnyx({ + account: {key: ONYXKEYS.ACCOUNT}, +})(UnlinkLoginPage);