diff --git a/src/Expensify.js b/src/Expensify.js index ede42c2873dd..60ab9f756dff 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -196,10 +196,10 @@ function Expensify(props) { {shouldInit && ( <> + - {/* We include the modal for showing a new update at the top level so the option is always present. */} {props.updateAvailable ? : null} diff --git a/src/components/DownloadAppModal.js b/src/components/DownloadAppModal.js index 1eeab1c72fd3..ffa933708e4c 100644 --- a/src/components/DownloadAppModal.js +++ b/src/components/DownloadAppModal.js @@ -16,14 +16,17 @@ const propTypes = { /** ONYX PROP to hide banner for a user that has dismissed it */ // eslint-disable-next-line react/forbid-prop-types showDownloadAppBanner: PropTypes.bool, + + /** Whether the user is logged in */ + isAuthenticated: PropTypes.bool.isRequired, }; const defaultProps = { showDownloadAppBanner: true, }; -function DownloadAppModal({showDownloadAppBanner}) { - const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && showDownloadAppBanner); +function DownloadAppModal({isAuthenticated, showDownloadAppBanner}) { + const [shouldShowBanner, setshouldShowBanner] = useState(Browser.isMobile() && isAuthenticated && showDownloadAppBanner); const {translate} = useLocalize(); diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index abade067f4fc..ec4f33997d2d 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -5,6 +5,7 @@ import lodashGet from 'lodash/get'; import {View} from 'react-native'; import styles from '../../../../styles/styles'; import * as Expensicons from '../../../../components/Icon/Expensicons'; +import * as Browser from '../../../../libs/Browser'; import Navigation from '../../../../libs/Navigation/Navigation'; import ROUTES from '../../../../ROUTES'; import NAVIGATORS from '../../../../NAVIGATORS'; @@ -61,6 +62,9 @@ const propTypes = { /** Indicated whether the report data is loading */ isLoading: PropTypes.bool, + /** For first time users, whether the download app banner should show */ + shouldShowDownloadAppBanner: PropTypes.bool, + /** Forwarded ref to FloatingActionButtonAndPopover */ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }; @@ -71,6 +75,7 @@ const defaultProps = { betas: [], isLoading: false, innerRef: null, + shouldShowDownloadAppBanner: true, }; /** @@ -146,19 +151,19 @@ function FloatingActionButtonAndPopover(props) { } }; - useEffect( - () => { - const navigationState = props.navigation.getState(); - const routes = lodashGet(navigationState, 'routes', []); - const currentRoute = routes[navigationState.index]; - if (currentRoute && ![NAVIGATORS.CENTRAL_PANE_NAVIGATOR, SCREENS.HOME].includes(currentRoute.name)) { - return; - } - Welcome.show({routes, showCreateMenu}); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [], - ); + useEffect(() => { + const navigationState = props.navigation.getState(); + const routes = lodashGet(navigationState, 'routes', []); + const currentRoute = routes[navigationState.index]; + if (currentRoute && ![NAVIGATORS.CENTRAL_PANE_NAVIGATOR, SCREENS.HOME].includes(currentRoute.name)) { + return; + } + // Avoid rendering the create menu for first-time users until they have dismissed the download app banner (mWeb only). + if (props.shouldShowDownloadAppBanner || Browser.isMobile()) { + return; + } + Welcome.show({routes, showCreateMenu}); + }, [props.shouldShowDownloadAppBanner, props.navigation, showCreateMenu]); useEffect(() => { if (!didScreenBecomeInactive()) { @@ -286,6 +291,9 @@ export default compose( isLoading: { key: ONYXKEYS.IS_LOADING_REPORT_DATA, }, + shouldShowDownloadAppBanner: { + key: ONYXKEYS.SHOW_DOWNLOAD_APP_BANNER, + }, }), )( forwardRef((props, ref) => (