[ideal-nav] Full-screen account settings

patches/@react-navigation+stack+6.3.16+002+dontDetachScreen.patch

@@ -43,7 +43,7 @@ index 7558eb3..b7bb75e 100644
          }) : STATE_TRANSITIONING_OR_BELOW_TOP;
        }
 +      
-+      const isHomeScreenAndNotOnTop = route.name === 'Home' && isScreenActive !== STATE_ON_TOP;
++      const isHomeScreenAndNotOnTop = (route.name === 'Home' || route.name === 'SettingsHome')  && isScreenActive !== STATE_ON_TOP;
 +
        const {
          headerShown = true,

src/CONST.ts

@@ -961,6 +961,7 @@ const CONST = {
             3: 100,
         },
     },
+    CENTRAL_PANE_ANIMATION_HEIGHT: 200,
     LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EMAIL: {

src/ROUTES.ts

@@ -57,6 +57,8 @@ const ROUTES = {
     },
 
     SETTINGS: 'settings',
+    SETTINGS_HOME: 'settings_new',
+    SETTINGS_NEW_PROFILE: 'settings_new/profile',
     SETTINGS_PROFILE: 'settings/profile',
     SETTINGS_SHARE_CODE: 'settings/shareCode',
     SETTINGS_DISPLAY_NAME: 'settings/profile/display-name',

src/SCREENS.ts

@@ -17,6 +17,8 @@ const SCREENS = {
     TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
     VALIDATE_LOGIN: 'ValidateLogin',
     UNLINK_LOGIN: 'UnlinkLogin',
+    SETTINGS_HOME: 'SettingsHome',
+    SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     SETTINGS: {
         ROOT: 'Settings_Root',
         SHARE_CODE: 'Settings_Share_Code',

src/components/AvatarWithImagePicker.js

@@ -94,6 +94,9 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+
+    /** Style applied to the avatar */
+    avatarStyle: stylePropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -141,6 +144,7 @@ function AvatarWithImagePicker({
     anchorAlignment,
     onImageSelected,
     editorMaskImage,
+    avatarStyle,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -287,7 +291,7 @@ function AvatarWithImagePicker({
 
     return (
         <View style={StyleSheet.flatten([styles.alignItemsCenter, style])}>
-            <View style={[styles.pRelative, styles.avatarLarge]}>
+            <View style={[styles.pRelative, avatarStyle]}>
                 <OfflineWithFeedback
                     pendingAction={pendingAction}
                     errors={errors}
@@ -305,8 +309,8 @@ function AvatarWithImagePicker({
                             <View>
                                 {source ? (
                                     <Avatar
-                                        containerStyles={styles.avatarLarge}
-                                        imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                        containerStyles={avatarStyle}
+                                        imageStyles={[avatarStyle, styles.alignSelfCenter]}
                                         source={source}
                                         fallbackIcon={fallbackIcon}
                                         size={size}

src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js

@@ -96,6 +96,9 @@ const propTypes = {
 
     /** Whether we should navigate to report page when the route have a topMostReport  */
     shouldNavigateToTopMostReport: PropTypes.bool,
+
+    /** Whether we should show the back button only on mobile */
+    shouldUseCentralPaneView: PropTypes.bool,
 };
 
 export default propTypes;

src/components/HeaderWithBackButton/index.js

@@ -12,6 +12,7 @@ import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import useStyleUtils from '@styles/useStyleUtils';
@@ -40,6 +41,7 @@ function HeaderWithBackButton({
     shouldShowPinButton = false,
     shouldShowThreeDotsButton = false,
     shouldDisableThreeDotsButton = false,
+    shouldUseCentralPaneView = false,
     stepCounter = null,
     subtitle = '',
     title = '',
@@ -61,15 +63,27 @@ function HeaderWithBackButton({
     const {translate} = useLocalize();
     const {isKeyboardShown} = useKeyboardState();
     const waitForNavigate = useWaitForNavigation();
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const shouldFinalShowBackButton = shouldShowBackButton && (!shouldUseCentralPaneView || isSmallScreenWidth);
     return (
         <View
             // Hover on some part of close icons will not work on Electron if dragArea is true
             // https://github.com/Expensify/App/issues/29598
             dataSet={{dragArea: false}}
             style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2]}
         >
-            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
-                {shouldShowBackButton && (
+            <View
+                style={[
+                    styles.dFlex,
+                    styles.flexRow,
+                    styles.alignItemsCenter,
+                    styles.flexGrow1,
+                    styles.justifyContentBetween,
+                    styles.overflowHidden,
+                    !shouldFinalShowBackButton && styles.pl5,
+                ]}
+            >
+                {shouldFinalShowBackButton && (
                     <Tooltip text={translate('common.back')}>
                         <PressableWithoutFeedback
                             onPress={() => {

src/components/IllustratedHeaderPageLayout.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import HeaderPageLayout from './HeaderPageLayout';
@@ -34,6 +35,10 @@ const defaultProps = {
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    const shouldUseMaxHeight = propsToPassToHeader.shouldUseCentralPaneView && !isSmallScreenWidth;
+
     return (
         <HeaderPageLayout
             backgroundColor={backgroundColor || theme.appBG}
@@ -43,14 +48,15 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                     <Lottie
                         source={illustration}
                         style={styles.w100}
-                        webStyle={styles.w100}
+                        webStyle={shouldUseMaxHeight ? styles.h100 : styles.w100}
                         autoPlay
                         loop
                     />
                     {overlayContent && overlayContent()}
                 </>
             }
-            headerContainerStyles={[styles.justifyContentCenter, styles.w100]}
+            // TODO: move to variables
+            headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldUseMaxHeight && styles.centralPaneAnimation]}
             footer={footer}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsToPassToHeader}

src/components/QRShare/index.js

@@ -4,14 +4,17 @@ import _ from 'underscore';
 import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
 import QRCode from '@components/QRCode';
 import Text from '@components/Text';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import {qrShareDefaultProps, qrSharePropTypes} from './propTypes';
 
 function QRShare({innerRef, url, title, subtitle, logo, logoRatio, logoMarginRatio}) {
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {isSmallScreenWidth} = useWindowDimensions();
 
     const [qrCodeSize, setQrCodeSize] = useState(1);
     const svgRef = useRef(null);
@@ -26,7 +29,11 @@ function QRShare({innerRef, url, title, subtitle, logo, logoRatio, logoMarginRat
 
     const onLayout = (event) => {
         const containerWidth = event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2 || 0;
-        setQrCodeSize(Math.max(1, containerWidth));
+        if (isSmallScreenWidth) {
+            setQrCodeSize(Math.max(1, containerWidth));
+            return;
+        }
+        setQrCodeSize(Math.max(1, Math.min(containerWidth, CONST.CENTRAL_PANE_ANIMATION_HEIGHT)));
     };
 
     return (

src/languages/en.ts

@@ -758,6 +758,9 @@ export default {
             phrase4: 'Privacy',
         },
         help: 'Help',
+        accountSettings: 'Account Settings',
+        account: 'Account',
+        general: 'General',
     },
     closeAccountPage: {
         closeAccount: 'Close account',

src/languages/es.ts

@@ -753,6 +753,9 @@ export default {
             phrase4: 'Privacidad',
         },
         help: 'Ayuda',
+        accountSettings: 'Configuración de la cuenta',
+        account: 'Cuenta',
+        general: 'General',
     },
     closeAccountPage: {
         closeAccount: 'Cerrar cuenta',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -5,11 +5,11 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
 import Navigation from '@libs/Navigation/Navigation';
+import {AuthScreensParamList} from '@libs/Navigation/types';
 import NetworkConnection from '@libs/NetworkConnection';
 import * as Pusher from '@libs/Pusher/pusher';
 import PusherConnectionManager from '@libs/PusherConnectionManager';
 import * as SessionUtils from '@libs/SessionUtils';
-import type {AuthScreensParamList} from '@navigation/types';
 import DemoSetupPage from '@pages/DemoSetupPage';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage';
@@ -36,6 +36,7 @@ import createCustomStackNavigator from './createCustomStackNavigator';
 import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
 import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
+import FullScreenNavigator from './Navigators/FullScreenNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
 
 type AuthScreensProps = {
@@ -318,6 +319,11 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom
                     component={RightModalNavigator}
                     listeners={modalScreenListeners}
                 />
+                <RootStack.Screen
+                    name={NAVIGATORS.FULL_SCREEN_NAVIGATOR}
+                    options={screenOptions.fullScreen}
+                    component={FullScreenNavigator}
+                />
                 <RootStack.Screen
                     name={SCREENS.DESKTOP_SIGN_IN_REDIRECT}
                     options={screenOptions.fullScreen}

src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

@@ -28,6 +28,7 @@ import type {
     TeachersUniteNavigatorParamList,
     WalletStatementNavigatorParamList,
 } from '@navigation/types';
+import {ThemeStyles} from '@styles/styles';
 import useThemeStyles from '@styles/useThemeStyles';
 import SCREENS from '@src/SCREENS';
 import type {Screen} from '@src/SCREENS';
@@ -39,7 +40,7 @@ type Screens = Partial<Record<Screen, () => React.ComponentType>>;
  *
  * @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
  */
-function createModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens): React.ComponentType {
+function createModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType {
     const ModalStackNavigator = createStackNavigator<TStackParams>();
 
     function ModalStack() {
@@ -55,7 +56,7 @@ function createModalStackNavigator<TStackParams extends ParamListBase>(screens:
         );
 
         return (
-            <ModalStackNavigator.Navigator screenOptions={defaultSubRouteOptions}>
+            <ModalStackNavigator.Navigator screenOptions={getScreenOptions?.(styles) ?? defaultSubRouteOptions}>
                 {Object.keys(screens as Required<Screens>).map((name) => (
                     <ModalStackNavigator.Screen
                         key={name}
@@ -177,6 +178,20 @@ const NewTeachersUniteNavigator = createModalStackNavigator<TeachersUniteNavigat
     [SCREENS.I_AM_A_TEACHER]: () => require('../../../pages/TeachersUnite/ImTeacherPage').default as React.ComponentType,
 });
 
+// should it be merged with SettingsModalStackNavigator?
+const AccountSettingsModalStackNavigator = createModalStackNavigator(
+    {
+        [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,
+        [SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../pages/ShareCodePage').default as React.ComponentType,
+        [SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType,
+        [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType,
+    },
+    (styles) => ({cardStyle: styles.navigationScreenCardStyle, headerShown: false}),
+);
+
 const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorParamList>({
     [SCREENS.SETTINGS.ROOT]: () => require('../../../pages/settings/InitialSettingsPage').default as React.ComponentType,
     [SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../pages/ShareCodePage').default as React.ComponentType,
@@ -291,6 +306,7 @@ export {
     SearchModalStackNavigator,
     NewChatModalStackNavigator,
     NewTaskModalStackNavigator,
+    AccountSettingsModalStackNavigator,
     SettingsModalStackNavigator,
     EnablePaymentsStackNavigator,
     AddPersonalBankAccountModalStackNavigator,

src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {View} from 'react-native';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import createCustomFullScreenNavigator from '@libs/Navigation/AppNavigator/createCustomFullScreenNavigator';
+import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
+import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
+import useThemeStyles from '@styles/useThemeStyles';
+import SCREENS from '@src/SCREENS';
+
+const loadPage = () => require('../../../../pages/settings/InitialSettingsPage').default as React.ComponentType;
+
+const RootStack = createCustomFullScreenNavigator();
+
+function FullScreenNavigator() {
+    const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
+
+    return (
+        <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
+            <RootStack.Navigator isSmallScreenWidth={isSmallScreenWidth}>
+                <RootStack.Screen
+                    name={SCREENS.SETTINGS_HOME}
+                    options={screenOptions.homeScreen}
+                    getComponent={loadPage}
+                />
+                <RootStack.Screen
+                    name={SCREENS.SETTINGS_CENTRAL_PANE}
+                    options={screenOptions.centralPaneNavigator}
+                    component={ModalStackNavigators.AccountSettingsModalStackNavigator}
+                />
+            </RootStack.Navigator>
+        </View>
+    );
+}
+
+FullScreenNavigator.displayName = 'FullScreenNavigator';
+
+export default FullScreenNavigator;