diff --git a/src/CONST.ts b/src/CONST.ts index 79599e54478c..7b5aa00f8fd3 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1448,7 +1448,7 @@ const CONST = { GUIDES_CALL_TASK_IDS: { CONCIERGE_DM: 'NewExpensifyConciergeDM', WORKSPACE_INITIAL: 'WorkspaceHome', - WORKSPACE_OVERVIEW: 'WorkspaceGeneralSettings', + WORKSPACE_OVERVIEW: 'WorkspaceOverview', WORKSPACE_CARD: 'WorkspaceCorporateCards', WORKSPACE_REIMBURSE: 'WorkspaceReimburseReceipts', WORKSPACE_BILLS: 'WorkspacePayBills', diff --git a/src/components/BlockingViews/ForceFullScreenView/index.native.tsx b/src/components/BlockingViews/ForceFullScreenView/index.native.tsx new file mode 100644 index 000000000000..296e7c26a9bc --- /dev/null +++ b/src/components/BlockingViews/ForceFullScreenView/index.native.tsx @@ -0,0 +1,9 @@ +import type ForceFullScreenViewProps from './types'; + +function ForceFullScreenView({children}: ForceFullScreenViewProps) { + return children; +} + +ForceFullScreenView.displayName = 'ForceFullScreenView'; + +export default ForceFullScreenView; diff --git a/src/components/BlockingViews/ForceFullScreenView/index.tsx b/src/components/BlockingViews/ForceFullScreenView/index.tsx new file mode 100644 index 000000000000..d63f0ae61648 --- /dev/null +++ b/src/components/BlockingViews/ForceFullScreenView/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import {View} from 'react-native'; +import useThemeStyles from '@hooks/useThemeStyles'; +import type ForceFullScreenViewProps from './types'; + +function ForceFullScreenView({children, forceFullScreen = false}: ForceFullScreenViewProps) { + const styles = useThemeStyles(); + + if (forceFullScreen) { + return {children}; + } + + return children; +} + +ForceFullScreenView.displayName = 'ForceFullScreenView'; + +export default ForceFullScreenView; diff --git a/src/components/BlockingViews/ForceFullScreenView/types.ts b/src/components/BlockingViews/ForceFullScreenView/types.ts new file mode 100644 index 000000000000..c896ac8c6753 --- /dev/null +++ b/src/components/BlockingViews/ForceFullScreenView/types.ts @@ -0,0 +1,7 @@ +import type ChildrenProps from '@src/types/utils/ChildrenProps'; + +type ForceFullScreenViewProps = ChildrenProps & { + forceFullScreen?: boolean; +}; + +export default ForceFullScreenViewProps; diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx index 5993e60861f5..f41a26db2e87 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.tsx +++ b/src/components/BlockingViews/FullPageNotFoundView.tsx @@ -9,6 +9,7 @@ import variables from '@styles/variables'; import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; import BlockingView from './BlockingView'; +import ForceFullScreenView from './ForceFullScreenView'; type FullPageNotFoundViewProps = { /** Child elements */ @@ -37,6 +38,9 @@ type FullPageNotFoundViewProps = { /** Function to call when pressing the navigation link */ onLinkPress: () => void; + + /** Whether we should force the full page view */ + forceFullScreen?: boolean; }; // eslint-disable-next-line rulesdir/no-negated-variables @@ -50,13 +54,14 @@ function FullPageNotFoundView({ shouldShowLink = true, shouldShowBackButton = true, onLinkPress = () => Navigation.dismissModal(), + forceFullScreen = false, }: FullPageNotFoundViewProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); if (shouldShow) { return ( - <> + - + ); } diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index a7d05a335d43..1be36cc4d2ed 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -50,6 +50,9 @@ type ScreenWrapperProps = { /** Whether to include padding bottom */ includeSafeAreaPaddingBottom?: boolean; + /** This overrides the above prop. It force disable the safe area bottom padding. */ + shouldDisableSafeAreaPaddingBottom?: boolean; + /** Whether to include padding top */ includePaddingTop?: boolean; @@ -103,6 +106,7 @@ function ScreenWrapper( headerGapStyles, children, shouldShowOfflineIndicator = true, + shouldDisableSafeAreaPaddingBottom = false, offlineIndicatorStyle, style, shouldDismissKeyboardBeforeClose = true, @@ -202,7 +206,7 @@ function ScreenWrapper( } // We always need the safe area padding bottom if we're showing the offline indicator since it is bottom-docked. - if (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator)) { + if (!shouldDisableSafeAreaPaddingBottom && (includeSafeAreaPaddingBottom || (isOffline && shouldShowOfflineIndicator))) { paddingStyle.paddingBottom = paddingBottom; } diff --git a/src/languages/es.ts b/src/languages/es.ts index e71ecf0d8188..d0191a1206ad 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -1566,7 +1566,7 @@ export default { }, emptyWorkspace: { title: 'Crea un espacio de trabajo', - subtitle: 'Administra gastos de empresa, emite tarjetas, envía facturas y mucho más.', + subtitle: 'En los espacios de trabajo podrás chatear con tu equipo, reembolsar gastos, emitir tarjetas, enviar y pagar facturas, y mucho más - todo en un mismo lugar.', createAWorkspaceCTA: 'Comenzar', features: { trackAndCollect: 'Organiza recibos', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 54947ea86109..b9578f0ccf41 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -40,6 +40,7 @@ type Screens = Partial React.ComponentType>>; * Create a modal stack navigator with an array of sub-screens. * * @param screens key/value pairs where the key is the name of the screen and the value is a functon that returns the lazy-loaded component + * @param getScreenOptions optional function that returns the screen options, override the default options */ function createModalStackNavigator(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType { const ModalStackNavigator = createStackNavigator(); @@ -184,8 +185,6 @@ const NewTeachersUniteNavigator = createModalStackNavigator require('../../../pages/settings/InitialSettingsPage').default as React.ComponentType, - [SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, @@ -197,8 +196,6 @@ const AccountSettingsModalStackNavigator = createModalStackNavigator( ); const SettingsModalStackNavigator = createModalStackNavigator({ - [SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../pages/ShareCodePage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.PRONOUNS]: () => require('../../../pages/settings/Profile/PronounsPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.DISPLAY_NAME]: () => require('../../../pages/settings/Profile/DisplayNamePage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.TIMEZONE]: () => require('../../../pages/settings/Profile/TimezoneInitialPage').default as React.ComponentType, @@ -211,16 +208,12 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/settings/Profile/Contacts/ContactMethodsPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: () => require('../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: () => require('../../../pages/settings/Profile/Contacts/NewContactMethodPage').default as React.ComponentType, - [SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require('../../../pages/settings/Preferences/PriorityModePage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: () => require('../../../pages/settings/Preferences/LanguagePage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType, [SCREENS.SETTINGS.CLOSE]: () => require('../../../pages/settings/Security/CloseAccountPage').default as React.ComponentType, - [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, - [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS]: () => require('../../../pages/settings/AppDownloadLinks').default as React.ComponentType, [SCREENS.SETTINGS.LOUNGE_ACCESS]: () => require('../../../pages/settings/Profile/LoungeAccessPage').default as React.ComponentType, - [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.DOMAIN_CARD]: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default as React.ComponentType, [SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD]: () => require('../../../pages/settings/Wallet/ReportVirtualCardFraudPage').default as React.ComponentType, @@ -238,9 +231,6 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/settings/Profile/CustomStatus/StatusClearAfterPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_DATE]: () => require('../../../pages/settings/Profile/CustomStatus/SetDatePage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_TIME]: () => require('../../../pages/settings/Profile/CustomStatus/SetTimePage').default as React.ComponentType, - [SCREENS.WORKSPACE.INITIAL]: () => require('../../../pages/workspace/WorkspaceInitialPage').default as React.ComponentType, - [SCREENS.WORKSPACE.CARD]: () => require('../../../pages/workspace/card/WorkspaceCardPage').default as React.ComponentType, - [SCREENS.WORKSPACE.REIMBURSE]: () => require('../../../pages/workspace/reimburse/WorkspaceReimbursePage').default as React.ComponentType, [SCREENS.WORKSPACE.RATE_AND_UNIT]: () => require('../../../pages/workspace/reimburse/WorkspaceRateAndUnitPage').default as React.ComponentType, [SCREENS.WORKSPACE.INVITE]: () => require('../../../pages/workspace/WorkspaceInvitePage').default as React.ComponentType, [SCREENS.WORKSPACE.INVITE_MESSAGE]: () => require('../../../pages/workspace/WorkspaceInviteMessagePage').default as React.ComponentType, diff --git a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx index e8d1d0c99de1..ce03a8d5bcba 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx @@ -15,6 +15,7 @@ const Tab = createCustomBottomTabNavigator(); const screenOptions: StackNavigationOptions = { headerShown: false, + animationEnabled: false, }; function BottomTabNavigator() { diff --git a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx index e095d2b3373f..e7f40bc963ee 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx @@ -20,7 +20,7 @@ function FullScreenNavigator() { return ( - + Navigation.navigate(ROUTES.SEARCH))} - containerStyle={styles.flexGrow1} + containerStyle={styles.flexShrink1} /> diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx index 961157f1823b..448606d85d99 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx @@ -2,7 +2,6 @@ import type {DefaultNavigatorOptions, ParamListBase, StackActionHelpers, StackNa import {createNavigatorFactory, StackRouter, useNavigationBuilder} from '@react-navigation/native'; import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; import {StackView} from '@react-navigation/stack'; -import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -16,23 +15,6 @@ type CustomNavigatorProps = DefaultNavigatorOptions): StackNavigationState { const routesToRender = [state.routes.at(-1)] as NavigationStateRoute[]; // We need to render at least one HOME screen to make sure everything load properly. @@ -84,8 +66,6 @@ function CustomBottomTabNavigator({initialRouteName, children, screenOptions, .. ); } -CustomBottomTabNavigator.defaultProps = defaultProps; -CustomBottomTabNavigator.propTypes = propTypes; CustomBottomTabNavigator.displayName = 'CustomBottomTabNavigator'; export default createNavigatorFactory(CustomBottomTabNavigator); diff --git a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts index 1ea0765d15d4..7e7808c003d7 100644 --- a/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts +++ b/src/libs/Navigation/AppNavigator/createCustomFullScreenNavigator/types.ts @@ -1,12 +1,8 @@ import type {DefaultNavigatorOptions, ParamListBase, StackNavigationState, StackRouterOptions} from '@react-navigation/native'; import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; -type FullScreenNavigatorConfig = { - isSmallScreenWidth: boolean; -}; - type FullScreenNavigatorRouterOptions = StackRouterOptions; -type FullScreenNavigatorProps = DefaultNavigatorOptions, StackNavigationOptions, StackNavigationEventMap> & FullScreenNavigatorConfig; +type FullScreenNavigatorProps = DefaultNavigatorOptions, StackNavigationOptions, StackNavigationEventMap>; -export type {FullScreenNavigatorConfig, FullScreenNavigatorProps, FullScreenNavigatorRouterOptions}; +export type {FullScreenNavigatorProps, FullScreenNavigatorRouterOptions}; diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 9bdbd4b4f555..6f03969dcd35 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -209,7 +209,7 @@ function goBack(fallbackRoute: Route = '', shouldEnforceFallback = false, should */ function closeFullScreen() { const rootState = navigationRef.getRootState(); - navigationRef.dispatch({...StackActions.pop(), target: rootState.key}); + navigationRef.dispatch({...StackActions.popToTop(), target: rootState.key}); } /** diff --git a/src/libs/Navigation/TAB_TO_CENTRAL_PANE_MAPPING.ts b/src/libs/Navigation/TAB_TO_CENTRAL_PANE_MAPPING.ts index 8889313c1b28..e3a2820b64d5 100755 --- a/src/libs/Navigation/TAB_TO_CENTRAL_PANE_MAPPING.ts +++ b/src/libs/Navigation/TAB_TO_CENTRAL_PANE_MAPPING.ts @@ -15,4 +15,17 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record = { ], }; +const generateCentralPaneToTabMapping = (): Record => { + const mapping: Record = {} as Record; + for (const [tabName, centralPaneNames] of Object.entries(TAB_TO_CENTRAL_PANE_MAPPING)) { + for (const centralPaneName of centralPaneNames) { + mapping[centralPaneName] = tabName as BottomTabName; + } + } + return mapping; +}; + +const CENTRAL_PANE_TO_TAB_MAPPING: Record = generateCentralPaneToTabMapping(); + +export {CENTRAL_PANE_TO_TAB_MAPPING}; export default TAB_TO_CENTRAL_PANE_MAPPING; diff --git a/src/libs/Navigation/getMatchingBottomTabRouteForState.ts b/src/libs/Navigation/getMatchingBottomTabRouteForState.ts index 2eb2a650ea06..830bedb4f40a 100644 --- a/src/libs/Navigation/getMatchingBottomTabRouteForState.ts +++ b/src/libs/Navigation/getMatchingBottomTabRouteForState.ts @@ -1,7 +1,7 @@ // import CONST from '@src/CONST'; import SCREENS from '@src/SCREENS'; import getTopmostCentralPaneRoute from './getTopmostCentralPaneRoute'; -import TAB_TO_CENTRAL_PANE_MAPPING from './TAB_TO_CENTRAL_PANE_MAPPING'; +import {CENTRAL_PANE_TO_TAB_MAPPING} from './TAB_TO_CENTRAL_PANE_MAPPING'; import type {BottomTabName, NavigationPartialRoute, RootStackParamList, State} from './types'; // Get the route that matches the topmost central pane route in the navigation stack. e.g REPORT -> HOME @@ -13,16 +13,11 @@ function getMatchingBottomTabRouteForState(state: State): Na return defaultRoute; } - for (const [tabName, centralPaneNames] of Object.entries(TAB_TO_CENTRAL_PANE_MAPPING)) { - if (centralPaneNames.includes(topmostCentralPaneRoute.name)) { - if (tabName === SCREENS.WORKSPACE.INITIAL) { - return {name: tabName, params: topmostCentralPaneRoute.params}; - } - return {name: tabName as BottomTabName}; - } + const tabName = CENTRAL_PANE_TO_TAB_MAPPING[topmostCentralPaneRoute.name]; + if (tabName === SCREENS.WORKSPACE.INITIAL) { + return {name: tabName, params: topmostCentralPaneRoute.params}; } - - return defaultRoute; + return {name: tabName as BottomTabName} || defaultRoute; } export default getMatchingBottomTabRouteForState; diff --git a/src/libs/Navigation/getTopmostCentralPaneName.ts b/src/libs/Navigation/getTopmostSettingsCentralPaneName.ts similarity index 76% rename from src/libs/Navigation/getTopmostCentralPaneName.ts rename to src/libs/Navigation/getTopmostSettingsCentralPaneName.ts index 03f749abcec4..b29fdc1d2802 100644 --- a/src/libs/Navigation/getTopmostCentralPaneName.ts +++ b/src/libs/Navigation/getTopmostSettingsCentralPaneName.ts @@ -2,7 +2,7 @@ import type {NavigationState, PartialState} from '@react-navigation/native'; import SCREENS from '@src/SCREENS'; // Get the name of topmost report in the navigation stack. -function getTopmostCentralPaneName(state: NavigationState | PartialState): string | undefined { +function getTopmostSettingsCentralPaneName(state: NavigationState | PartialState): string | undefined { if (!state) { return; } @@ -16,4 +16,4 @@ function getTopmostCentralPaneName(state: NavigationState | PartialState {({insets}) => ( diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index 68c4e47d18a0..73aede6bb23f 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -27,7 +27,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import compose from '@libs/compose'; import * as CurrencyUtils from '@libs/CurrencyUtils'; -import getTopmostCentralPaneName from '@libs/Navigation/getTopmostCentralPaneName'; +import getTopmostSettingsCentralPaneName from '@libs/Navigation/getTopmostSettingsCentralPaneName'; import Navigation from '@libs/Navigation/Navigation'; import * as UserUtils from '@libs/UserUtils'; import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes'; @@ -100,7 +100,7 @@ function InitialSettingsPage(props) { const waitForNavigate = useWaitForNavigation(); const popoverAnchor = useRef(null); const {translate} = useLocalize(); - const activeRoute = useNavigationState(getTopmostCentralPaneName); + const activeRoute = useNavigationState(getTopmostSettingsCentralPaneName); const [shouldShowSignoutConfirmModal, setShouldShowSignoutConfirmModal] = useState(false); diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.js b/src/pages/settings/Wallet/ChooseTransferAccountPage.js index 815d2e883cf0..ec7fd4ce55b5 100644 --- a/src/pages/settings/Wallet/ChooseTransferAccountPage.js +++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.js @@ -58,7 +58,7 @@ function ChooseTransferAccountPage(props) { title={props.translate('chooseTransferAccountPage.chooseAccount')} onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)} /> - + Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} @@ -235,9 +235,6 @@ WorkspaceInitialPage.displayName = 'WorkspaceInitialPage'; export default compose( withPolicyAndFullscreenLoading, withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - }, reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, diff --git a/src/pages/workspace/WorkspaceMembersPage.js b/src/pages/workspace/WorkspaceMembersPage.js index 5f73dad57cc7..95f6caaa4855 100644 --- a/src/pages/workspace/WorkspaceMembersPage.js +++ b/src/pages/workspace/WorkspaceMembersPage.js @@ -435,7 +435,6 @@ function WorkspaceMembersPage(props) { }} shouldShowBackButton={isSmallScreenWidth} guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS} - shouldShowBorderBottom /> - +