From 5432992bbde3e299b2e9b44e1a0c858fcb40cdfc Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Fri, 9 Feb 2024 13:48:09 +0100 Subject: [PATCH 001/274] Implement modal for onboarding --- src/NAVIGATORS.ts | 1 + src/ROUTES.ts | 4 ++++ src/SCREENS.ts | 8 +++++++ src/components/Modal/BaseModal.tsx | 2 +- .../PurposeForUsingExpensifyModal.tsx | 5 +++- src/components/WorkspaceSwitcherButton.tsx | 2 +- .../Navigation/AppNavigator/AuthScreens.tsx | 13 ++++++++-- .../AppNavigator/ModalStackNavigators.tsx | 6 +++++ .../BottomTabBar.tsx | 1 - .../getRootNavigatorScreenOptions.ts | 9 +++++++ src/libs/Navigation/NavigationRoot.tsx | 2 ++ src/libs/Navigation/linkingConfig/config.ts | 24 +++++++++++++++++++ .../linkingConfig/getAdaptedStateFromPath.ts | 3 +++ src/libs/Navigation/types.ts | 8 +++++++ 14 files changed, 82 insertions(+), 6 deletions(-) diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts index 3bc9c5e57b9b..10e268b07520 100644 --- a/src/NAVIGATORS.ts +++ b/src/NAVIGATORS.ts @@ -7,5 +7,6 @@ export default { BOTTOM_TAB_NAVIGATOR: 'BottomTabNavigator', LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator', RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator', + ONBOARDING_MODAL_NAVIGATOR: 'OnboardingModalNavigator', FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator', } as const; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index e987c5b94d7d..c1ca60e35af0 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -491,6 +491,10 @@ const ROUTES = { getRoute: (contentType: string) => `referral/${contentType}` as const, }, PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational', + ONBOARDING_WELCOME: 'onboarding/welcome', + ONBOARDING_PURPOSE: 'onboarding/purpose', + WELCOME: 'welcome', + PURPOSE: 'purpose', } as const; /** diff --git a/src/SCREENS.ts b/src/SCREENS.ts index e2f0e9745561..02f2536cb602 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -119,6 +119,9 @@ const SCREENS = { REFERRAL: 'Referral', PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold', }, + ONBOARDING_MODAL: { + ONBOARDING: 'Onboarding', + }, SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop', SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop', DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect', @@ -230,6 +233,11 @@ const SCREENS = { EDIT_CURRENCY: 'SplitDetails_Edit_Currency', }, + ONBOARDING: { + WELCOME: 'Onboarding_Welcome', + PURPOSE: 'Onboarding_Purpose', + }, + I_KNOW_A_TEACHER: 'I_Know_A_Teacher', INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal', I_AM_A_TEACHER: 'I_Am_A_Teacher', diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index c1f4df8d4c99..c5fe44677476 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -191,7 +191,7 @@ function BaseModal( backdropColor={theme.overlay} backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity} backdropTransitionOutTiming={0} - hasBackdrop={fullscreen} + hasBackdrop={false} coverScreen={fullscreen} style={modalStyle} deviceHeight={windowHeight} diff --git a/src/components/PurposeForUsingExpensifyModal.tsx b/src/components/PurposeForUsingExpensifyModal.tsx index e65646aeac84..175bb4acb698 100644 --- a/src/components/PurposeForUsingExpensifyModal.tsx +++ b/src/components/PurposeForUsingExpensifyModal.tsx @@ -23,6 +23,7 @@ import type {MenuItemProps} from './MenuItem'; import MenuItemList from './MenuItemList'; import Modal from './Modal'; import Text from './Text'; +import Navigation from '@libs/Navigation/Navigation'; // This is not translated because it is a message coming from concierge, which only supports english const messageCopy = { @@ -92,7 +93,7 @@ function PurposeForUsingExpensifyModal({isLoadingApp = false}: PurposeForUsingEx const styles = useThemeStyles(); const {isSmallScreenWidth, windowHeight} = useWindowDimensions(); const navigation = useNavigation(); - const [isModalOpen, setIsModalOpen] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(true); const theme = useTheme(); useEffect(() => { @@ -110,11 +111,13 @@ function PurposeForUsingExpensifyModal({isLoadingApp = false}: PurposeForUsingEx const closeModal = useCallback(() => { Report.dismissEngagementModal(); setIsModalOpen(false); + Navigation.goBack(); }, []); const completeModalAndClose = useCallback((message: string, choice: ValueOf) => { Report.completeEngagementModal(message, choice); setIsModalOpen(false); + Navigation.goBack(); Report.navigateToConciergeChat(); }, []); diff --git a/src/components/WorkspaceSwitcherButton.tsx b/src/components/WorkspaceSwitcherButton.tsx index b7485fbab7a8..03e91b1f71ad 100644 --- a/src/components/WorkspaceSwitcherButton.tsx +++ b/src/components/WorkspaceSwitcherButton.tsx @@ -44,7 +44,7 @@ function WorkspaceSwitcherButton({activeWorkspaceID, policy}: WorkspaceSwitcherB accessible onPress={() => interceptAnonymousUser(() => { - Navigation.navigate(ROUTES.WORKSPACE_SWITCHER); + Navigation.navigate(ROUTES.WELCOME); }) } > diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 00c96d436496..4f3775abb1a3 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -41,6 +41,7 @@ import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; import FullScreenNavigator from './Navigators/FullScreenNavigator'; import LeftModalNavigator from './Navigators/LeftModalNavigator'; import RightModalNavigator from './Navigators/RightModalNavigator'; +import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator'; type AuthScreensProps = { /** Session of currently logged in user */ @@ -256,14 +257,22 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f unsubscribeChatShortcut(); Session.cleanupSession(); }; - + // Rule disabled because this effect is only for component did mount & will component unmount lifecycle event // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - + return ( + require('../../../pages/ProcessMoneyRequestHoldPage').default as React.ComponentType, }); +const OnboardingModalStackNavigator = createModalStackNavigator({ + [SCREENS.ONBOARDING.WELCOME]: () => require('../../../../src/components/PurposeForUsingExpensifyModal').default as React.ComponentType, + [SCREENS.ONBOARDING.PURPOSE]: () => require('../../../../src/components/PurposeForUsingExpensifyModal').default as React.ComponentType, +}) + export { AccountSettingsModalStackNavigator, AddPersonalBankAccountModalStackNavigator, @@ -317,4 +322,5 @@ export { TaskModalStackNavigator, WalletStatementStackNavigator, ProcessMoneyRequestHoldStackNavigator, + OnboardingModalStackNavigator, }; diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx index 7f7e86b3dafb..ef4df063c8a8 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx @@ -86,7 +86,6 @@ function BottomTabBar() { - ); } diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts index c3a69bbd7ccf..26e5829d82e5 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts @@ -39,6 +39,15 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr right: 0, }, }, + onboardingModalNavigator: { + headerShown: false, + detachPreviousScreen: false, + animationEnabled: false, + presentation: 'transparentModal', + cardStyle: { + backgroundColor: 'transparent', + }, + }, leftModalNavigator: { ...commonScreenOptions, cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER), diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index 20c426a74c71..d3c13eda4895 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -118,6 +118,8 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady}: N if (!state) { return; } + Log.info("STATE"); + Log.info(JSON.stringify(state)); const activeWorkspaceID = getPolicyIDFromState(state as NavigationState); // Performance optimization to avoid context consumers to delay first render setTimeout(() => { diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 6f96642953af..2c640b05d9d7 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -80,6 +80,30 @@ const config: LinkingOptions['config'] = { }, }, }, + [NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: { + screens: { + // [SCREENS.ONBOARDING_MODAL.ONBOARDING]: { + // screens: { + // [SCREENS.ONBOARDING.WELCOME]: { + // path: ROUTES.ONBOARDING_WELCOME, + // exact: true, + // }, + // [SCREENS.ONBOARDING.PURPOSE]: { + // path: ROUTES.ONBOARDING_PURPOSE, + // exact: true, + // }, + // } + // }, + [SCREENS.ONBOARDING.WELCOME]: { + path: ROUTES.WELCOME, + exact: true, + }, + [SCREENS.ONBOARDING.PURPOSE]: { + path: ROUTES.PURPOSE, + exact: true, + } + } + }, [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: { screens: { [SCREENS.RIGHT_MODAL.SETTINGS]: { diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts index 06e58282da70..2b702453955c 100644 --- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts +++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts @@ -7,6 +7,7 @@ import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRo import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; +import Log from '@libs/Log'; import CENTRAL_PANE_TO_RHP_MAPPING from './CENTRAL_PANE_TO_RHP_MAPPING'; import config from './config'; import FULL_SCREEN_TO_RHP_MAPPING from './FULL_SCREEN_TO_RHP_MAPPING'; @@ -288,6 +289,8 @@ const getAdaptedStateFromPath: GetAdaptedStateFromPath = (path, options) => { const policyID = isAnonymous ? undefined : extractPolicyIDFromPath(path); const state = getStateFromPath(pathWithoutPolicyID, options) as PartialState>; + Log.info("STATE FROM PATH"); + Log.info(JSON.stringify(state)); replacePathInNestedState(state, path); if (state === undefined) { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index d544c2ffa3b6..c5022bf1d278 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -402,6 +402,12 @@ type FullScreenNavigatorParamList = { [SCREENS.SETTINGS_CENTRAL_PANE]: NavigatorScreenParams; }; +type OnboardingModalNavigatorParamList = { + [SCREENS.ONBOARDING_MODAL.ONBOARDING]: undefined; + [SCREENS.ONBOARDING.WELCOME]: undefined; + [SCREENS.ONBOARDING.PURPOSE]: undefined; +}; + type BottomTabNavigatorParamList = { [SCREENS.HOME]: undefined; [SCREENS.ALL_SETTINGS]: undefined; @@ -461,6 +467,7 @@ type AuthScreensParamList = { [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: NavigatorScreenParams; [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: NavigatorScreenParams; [NAVIGATORS.FULL_SCREEN_NAVIGATOR]: NavigatorScreenParams; + [NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: NavigatorScreenParams; [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: undefined; }; @@ -494,6 +501,7 @@ export type { BottomTabNavigatorParamList, LeftModalNavigatorParamList, RightModalNavigatorParamList, + OnboardingModalNavigatorParamList, PublicScreensParamList, MoneyRequestNavigatorParamList, SplitDetailsNavigatorParamList, From cf53a8ab1e05158afeac26c335fbb9e2a44ac32a Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Fri, 9 Feb 2024 13:48:33 +0100 Subject: [PATCH 002/274] Add onboarding navigator --- .../Navigators/OnboardingModalNavigator.tsx | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx diff --git a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx new file mode 100644 index 000000000000..8d6a7a931f85 --- /dev/null +++ b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx @@ -0,0 +1,45 @@ +import React, { useMemo } from 'react'; +import {View} from 'react-native'; +import NoDropZone from "@components/DragAndDrop/NoDropZone"; +import type { OnboardingModalNavigatorParamList } from "@libs/Navigation/types"; +import { createStackNavigator } from "@react-navigation/stack"; +import SCREENS from "@src/SCREENS"; +import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; +import useThemeStyles from '@hooks/useThemeStyles'; +// import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; +import PurposeForUsingExpensifyModal from '@components/PurposeForUsingExpensifyModal'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import Overlay from './Overlay'; + +const Stack = createStackNavigator(); + +function OnboardingModalNavigator() { + + const styles = useThemeStyles(); + const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); + const {isSmallScreenWidth} = useWindowDimensions(); + + return + + {!isSmallScreenWidth && {}}/>} + + {/* */} + + + + + +} + +OnboardingModalNavigator.displayName = 'OnboardingModalNavigator'; + +export default OnboardingModalNavigator; \ No newline at end of file From 30b74113ebdf8935ad38e7d14652cc234a5b9449 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Fri, 9 Feb 2024 15:28:24 +0100 Subject: [PATCH 003/274] modify getAdaptedState to handle onboarding navigator --- .../linkingConfig/getAdaptedStateFromPath.ts | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts index 2b702453955c..ea6c94f1b698 100644 --- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts +++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts @@ -2,12 +2,12 @@ import type {NavigationState, PartialState} from '@react-navigation/native'; import {getStateFromPath} from '@react-navigation/native'; import {isAnonymousUser} from '@libs/actions/Session'; import getIsSmallScreenWidth from '@libs/getIsSmallScreenWidth'; +import Log from '@libs/Log'; import getTopmostNestedRHPRoute from '@libs/Navigation/getTopmostNestedRHPRoute'; import type {BottomTabName, CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import {extractPolicyIDFromPath, getPathWithoutPolicyID} from '@libs/PolicyUtils'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; -import Log from '@libs/Log'; import CENTRAL_PANE_TO_RHP_MAPPING from './CENTRAL_PANE_TO_RHP_MAPPING'; import config from './config'; import FULL_SCREEN_TO_RHP_MAPPING from './FULL_SCREEN_TO_RHP_MAPPING'; @@ -145,6 +145,8 @@ function getAdaptedState(state: PartialState const fullScreenNavigator = state.routes.find((route) => route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR); const rhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); const lhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR); + const onboardingModalNavigator = state.routes.find((route) => route.name === NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR); + if (rhpNavigator) { // Routes // - matching bottom tab @@ -177,13 +179,13 @@ function getAdaptedState(state: PartialState metainfo, }; } - if (lhpNavigator) { + if (lhpNavigator ?? onboardingModalNavigator) { // Routes // - default bottom tab // - default central pane on desktop layout - // - found lhp + // - found lhp / onboardingModalNavigator - // Currently there is only the search and workspace switcher in LHP both can have any central pane under the overlay. + // There is no screen in these navigators that would have mandatory central pane, bottom tab or fullscreen navigator. metainfo.isCentralPaneAndBottomTabMandatory = false; metainfo.isFullScreenNavigatorMandatory = false; const routes = []; @@ -202,7 +204,15 @@ function getAdaptedState(state: PartialState }), ); } - routes.push(lhpNavigator); + + // Separate ifs are necessary for typescript to see that we are not pushing unedinfed to the array. + if (lhpNavigator) { + routes.push(lhpNavigator); + } + + if (onboardingModalNavigator) { + routes.push(onboardingModalNavigator); + } return { adaptedState: getRoutesWithIndex(routes), @@ -266,6 +276,10 @@ function getAdaptedState(state: PartialState const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(state); if (matchingCentralPaneRoute) { routes.push(createCentralPaneNavigator(matchingCentralPaneRoute)); + } else { + // If there is no matching central pane, we want to add the default one. + metainfo.isCentralPaneAndBottomTabMandatory = false; + routes.push(createCentralPaneNavigator({name: SCREENS.REPORT})); } return { @@ -289,14 +303,16 @@ const getAdaptedStateFromPath: GetAdaptedStateFromPath = (path, options) => { const policyID = isAnonymous ? undefined : extractPolicyIDFromPath(path); const state = getStateFromPath(pathWithoutPolicyID, options) as PartialState>; - Log.info("STATE FROM PATH"); + Log.info('STATE FROM PATH'); Log.info(JSON.stringify(state)); replacePathInNestedState(state, path); if (state === undefined) { throw new Error('Unable to parse path'); } - return getAdaptedState(state, policyID); + + const tmp = getAdaptedState(state, policyID); + return tmp; }; export default getAdaptedStateFromPath; From 1895d1841f1da4c1ea2ff498493bf3642e80548f Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Mon, 12 Feb 2024 11:30:27 +0100 Subject: [PATCH 004/274] Adjust designs for medium sized screens --- src/CONST.ts | 1 + src/ROUTES.ts | 4 +- src/SCREENS.ts | 2 +- src/components/Modal/BaseModal.tsx | 10 +++- src/components/Modal/types.ts | 3 + src/hooks/useOnboardingLayout.ts | 16 ++++++ src/hooks/useWindowDimensions/index.ts | 3 + .../Navigation/AppNavigator/AuthScreens.tsx | 2 +- .../AppNavigator/ModalStackNavigators.tsx | 4 +- .../Navigators/OnboardingModalNavigator.tsx | 57 ++++++++----------- .../AppNavigator/Navigators/Overlay.tsx | 18 +++++- src/libs/Navigation/NavigationRoot.tsx | 6 +- src/libs/Navigation/linkingConfig/config.ts | 22 ++----- src/libs/Navigation/types.ts | 2 +- src/pages/OnboardingPersonalDetails.tsx | 46 +++++++++++++++ src/pages/OnboardingPurpose.tsx | 48 ++++++++++++++++ src/styles/index.ts | 12 ++++ .../utils/generators/ModalStyleUtils.ts | 35 +++++++++++- 18 files changed, 225 insertions(+), 66 deletions(-) create mode 100644 src/hooks/useOnboardingLayout.ts create mode 100644 src/pages/OnboardingPersonalDetails.tsx create mode 100644 src/pages/OnboardingPurpose.tsx diff --git a/src/CONST.ts b/src/CONST.ts index 6c726cde12f7..f9f4ad1c562f 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -715,6 +715,7 @@ const CONST = { BOTTOM_DOCKED: 'bottom_docked', POPOVER: 'popover', RIGHT_DOCKED: 'right_docked', + ONBOARDING: 'onboarding', }, ANCHOR_ORIGIN_VERTICAL: { TOP: 'top', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index c1ca60e35af0..108bd21a8251 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -491,10 +491,8 @@ const ROUTES = { getRoute: (contentType: string) => `referral/${contentType}` as const, }, PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational', - ONBOARDING_WELCOME: 'onboarding/welcome', + ONBOARDING_PERSONAL_DETAILS: 'onboarding/personal-details', ONBOARDING_PURPOSE: 'onboarding/purpose', - WELCOME: 'welcome', - PURPOSE: 'purpose', } as const; /** diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 02f2536cb602..6f1cf39207c8 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -234,7 +234,7 @@ const SCREENS = { }, ONBOARDING: { - WELCOME: 'Onboarding_Welcome', + PERSONAL_DETAILS: 'Onboarding_Personal_Details', PURPOSE: 'Onboarding_Purpose', }, diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index c5fe44677476..d950478cae6b 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import ReactNativeModal from 'react-native-modal'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import useKeyboardState from '@hooks/useKeyboardState'; +import useOnboardingLayout from '@hooks/useOnboardingLayout'; import usePrevious from '@hooks/usePrevious'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -22,6 +23,7 @@ function BaseModal( isVisible, onClose, shouldSetModalVisibility = true, + shouldForceHideBackdrop = false, onModalHide = () => {}, type, popoverAnchorPosition = {}, @@ -48,6 +50,7 @@ function BaseModal( const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useOnboardingLayout(); const keyboardStateContextValue = useKeyboardState(); const safeAreaInsets = useSafeAreaInsets(); @@ -147,8 +150,9 @@ function BaseModal( popoverAnchorPosition, innerContainerStyle, outerStyle, + shouldUseNarrowLayout, ), - [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle], + [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle, shouldUseNarrowLayout], ); const { @@ -189,9 +193,9 @@ function BaseModal( swipeDirection={swipeDirection} isVisible={isVisible} backdropColor={theme.overlay} - backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity} + backdropOpacity={(!shouldUseCustomBackdrop && hideBackdrop) || shouldForceHideBackdrop ? 0 : variables.overlayOpacity} backdropTransitionOutTiming={0} - hasBackdrop={false} + hasBackdrop={fullscreen} coverScreen={fullscreen} style={modalStyle} deviceHeight={windowHeight} diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts index a0cdb737d448..f92532f6e27f 100644 --- a/src/components/Modal/types.ts +++ b/src/components/Modal/types.ts @@ -20,6 +20,9 @@ type BaseModalProps = Partial & { /** Should we announce the Modal visibility changes? */ shouldSetModalVisibility?: boolean; + /** Should we hide backdrop no matter what value is set in modal styles */ + shouldForceHideBackdrop?: boolean; + /** Callback method fired when the user requests to close the modal */ onClose: () => void; diff --git a/src/hooks/useOnboardingLayout.ts b/src/hooks/useOnboardingLayout.ts new file mode 100644 index 000000000000..99c47643d2b5 --- /dev/null +++ b/src/hooks/useOnboardingLayout.ts @@ -0,0 +1,16 @@ +// eslint-disable-next-line no-restricted-imports +import {useWindowDimensions} from 'react-native'; +import variables from '@styles/variables'; + +type OnboardingLayout = { + shouldUseNarrowLayout: boolean; +}; + +/** + * Onboarding layout for medium screen width is narrowed similarly as on web/desktop. + */ +export default function useOnboardingLayout(): OnboardingLayout { + const {width: windowWidth} = useWindowDimensions(); + + return {shouldUseNarrowLayout: windowWidth > variables.mobileResponsiveWidthBreakpoint}; +} diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts index b0a29e9f901b..fdaa96d747c5 100644 --- a/src/hooks/useWindowDimensions/index.ts +++ b/src/hooks/useWindowDimensions/index.ts @@ -1,5 +1,6 @@ // eslint-disable-next-line no-restricted-imports import {Dimensions, useWindowDimensions} from 'react-native'; +import Log from '@libs/Log'; import variables from '@styles/variables'; import type WindowDimensions from './types'; @@ -15,6 +16,8 @@ export default function (): WindowDimensions { const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint; const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint; + Log.info(`WINDOW WIDTH ${windowWidth}`); + return { windowWidth, windowHeight, diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 4f3775abb1a3..cc17fcf07f4f 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -40,8 +40,8 @@ import BottomTabNavigator from './Navigators/BottomTabNavigator'; import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; import FullScreenNavigator from './Navigators/FullScreenNavigator'; import LeftModalNavigator from './Navigators/LeftModalNavigator'; -import RightModalNavigator from './Navigators/RightModalNavigator'; import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator'; +import RightModalNavigator from './Navigators/RightModalNavigator'; type AuthScreensProps = { /** Session of currently logged in user */ diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index b3ea3d28be04..4eb282595f1c 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -289,9 +289,9 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({ }); const OnboardingModalStackNavigator = createModalStackNavigator({ - [SCREENS.ONBOARDING.WELCOME]: () => require('../../../../src/components/PurposeForUsingExpensifyModal').default as React.ComponentType, + [SCREENS.ONBOARDING.PERSONAL_DETAILS]: () => require('../../../../src/components/PurposeForUsingExpensifyModal').default as React.ComponentType, [SCREENS.ONBOARDING.PURPOSE]: () => require('../../../../src/components/PurposeForUsingExpensifyModal').default as React.ComponentType, -}) +}); export { AccountSettingsModalStackNavigator, diff --git a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx index 8d6a7a931f85..9b40f5748f53 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx @@ -1,45 +1,38 @@ -import React, { useMemo } from 'react'; +import {createStackNavigator} from '@react-navigation/stack'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; -import NoDropZone from "@components/DragAndDrop/NoDropZone"; -import type { OnboardingModalNavigatorParamList } from "@libs/Navigation/types"; -import { createStackNavigator } from "@react-navigation/stack"; -import SCREENS from "@src/SCREENS"; -import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; +import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useThemeStyles from '@hooks/useThemeStyles'; -// import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; -import PurposeForUsingExpensifyModal from '@components/PurposeForUsingExpensifyModal'; -import useWindowDimensions from '@hooks/useWindowDimensions'; -import Overlay from './Overlay'; +import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; +import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types'; +import OnboardingPersonalDetails from '@pages/OnboardingPersonalDetails'; +import OnboardingPurpose from '@pages/OnboardingPurpose'; +import SCREENS from '@src/SCREENS'; const Stack = createStackNavigator(); function OnboardingModalNavigator() { - const styles = useThemeStyles(); const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); - const {isSmallScreenWidth} = useWindowDimensions(); - return - - {!isSmallScreenWidth && {}}/>} - - {/* */} - - - - - + return ( + + + + + + + + + ); } OnboardingModalNavigator.displayName = 'OnboardingModalNavigator'; -export default OnboardingModalNavigator; \ No newline at end of file +export default OnboardingModalNavigator; diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx index 5462b6c0ce4e..6917df30ce26 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx @@ -1,14 +1,16 @@ import {useCardAnimation} from '@react-navigation/stack'; -import React from 'react'; +import React, {useMemo} from 'react'; import {Animated, View} from 'react-native'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import useLocalize from '@hooks/useLocalize'; +import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import getOperatingSystem from '@libs/getOperatingSystem'; import CONST from '@src/CONST'; type OverlayProps = { /* Callback to close the modal */ - onPress: () => void; + onPress?: () => void; /* Returns whether a modal is displayed on the left side of the screen. By default, the modal is displayed on the right */ isModalOnTheLeft?: boolean; @@ -18,9 +20,19 @@ function Overlay({onPress, isModalOnTheLeft = false}: OverlayProps) { const styles = useThemeStyles(); const {current} = useCardAnimation(); const {translate} = useLocalize(); + const {shouldUseNarrowLayout} = useOnboardingLayout(); + + // non-native styling uses fixed positioning not supported on native platforms + const shouldUseNativeStyles = useMemo(() => { + const os = getOperatingSystem(); + if ((os === CONST.OS.ANDROID || os === CONST.OS.IOS || os === CONST.OS.NATIVE) && shouldUseNarrowLayout) { + return true; + } + return false; + }, [shouldUseNarrowLayout]); return ( - + {/* In the latest Electron version buttons can't be both clickable and draggable. That's why we added this workaround. Because of two Pressable components on the desktop app diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index d3c13eda4895..76e9cfa9d650 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -41,6 +41,8 @@ function parseAndLogRoute(state: NavigationState) { return; } + Log.info(`Current state ${JSON.stringify(state)}`); + const currentPath = customGetPathFromState(state, linkingConfig.config); const focusedRoute = findFocusedRoute(state); @@ -74,6 +76,8 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady}: N return undefined; } + return undefined; + const path = initialUrl ? getPathFromURL(initialUrl) : null; // For non-nullable paths we don't want to set initial state @@ -118,7 +122,7 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady}: N if (!state) { return; } - Log.info("STATE"); + Log.info('STATE'); Log.info(JSON.stringify(state)); const activeWorkspaceID = getPolicyIDFromState(state as NavigationState); // Performance optimization to avoid context consumers to delay first render diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 2c640b05d9d7..094cd20db93f 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -82,27 +82,15 @@ const config: LinkingOptions['config'] = { }, [NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: { screens: { - // [SCREENS.ONBOARDING_MODAL.ONBOARDING]: { - // screens: { - // [SCREENS.ONBOARDING.WELCOME]: { - // path: ROUTES.ONBOARDING_WELCOME, - // exact: true, - // }, - // [SCREENS.ONBOARDING.PURPOSE]: { - // path: ROUTES.ONBOARDING_PURPOSE, - // exact: true, - // }, - // } - // }, - [SCREENS.ONBOARDING.WELCOME]: { - path: ROUTES.WELCOME, + [SCREENS.ONBOARDING.PERSONAL_DETAILS]: { + path: ROUTES.ONBOARDING_PERSONAL_DETAILS, exact: true, }, [SCREENS.ONBOARDING.PURPOSE]: { - path: ROUTES.PURPOSE, + path: ROUTES.ONBOARDING_PURPOSE, exact: true, - } - } + }, + }, }, [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: { screens: { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index c5022bf1d278..5f018ccb6561 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -404,7 +404,7 @@ type FullScreenNavigatorParamList = { type OnboardingModalNavigatorParamList = { [SCREENS.ONBOARDING_MODAL.ONBOARDING]: undefined; - [SCREENS.ONBOARDING.WELCOME]: undefined; + [SCREENS.ONBOARDING.PERSONAL_DETAILS]: undefined; [SCREENS.ONBOARDING.PURPOSE]: undefined; }; diff --git a/src/pages/OnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails.tsx new file mode 100644 index 000000000000..370c8d10cbd1 --- /dev/null +++ b/src/pages/OnboardingPersonalDetails.tsx @@ -0,0 +1,46 @@ +import React, {useCallback, useState} from 'react'; +import {View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import Modal from '@components/Modal'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import Navigation from '@libs/Navigation/Navigation'; +import * as Report from '@userActions/Report'; +import CONST from '@src/CONST'; + +function OnboardingPersonalDetails() { + const styles = useThemeStyles(); + const {windowHeight} = useWindowDimensions(); + const [isModalOpen, setIsModalOpen] = useState(true); + const theme = useTheme(); + + const closeModal = useCallback(() => { + Report.dismissEngagementModal(); + Navigation.goBack(); + setIsModalOpen(false); + }, []); + + return ( + + + + + + ); +} + +OnboardingPersonalDetails.displayName = 'OnboardingPersonalDetails'; +export default OnboardingPersonalDetails; diff --git a/src/pages/OnboardingPurpose.tsx b/src/pages/OnboardingPurpose.tsx new file mode 100644 index 000000000000..9ad9c0d74334 --- /dev/null +++ b/src/pages/OnboardingPurpose.tsx @@ -0,0 +1,48 @@ +import React, {useCallback, useState} from 'react'; +import {View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import Modal from '@components/Modal'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import Navigation from '@libs/Navigation/Navigation'; +import * as Report from '@userActions/Report'; +import CONST from '@src/CONST'; + +function OnboardingPurpose() { + const styles = useThemeStyles(); + const {windowHeight} = useWindowDimensions(); + const [isModalOpen, setIsModalOpen] = useState(true); + const theme = useTheme(); + + const closeModal = useCallback(() => { + Report.dismissEngagementModal(); + Navigation.goBack(); + setIsModalOpen(false); + }, []); + + return ( + + + + + + ); +} + +OnboardingPurpose.displayName = 'OnboardingPurpose'; +export default OnboardingPurpose; diff --git a/src/styles/index.ts b/src/styles/index.ts index 2e16f1dbd7af..93c7f5d1e1b0 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1711,6 +1711,18 @@ const styles = (theme: ThemeColors) => }), } satisfies ViewStyle), + nativeOverlayStyles: (current: OverlayStylesParams) => + ({ + backgroundColor: theme.overlay, + width: '100%', + height: '100%', + opacity: current.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0, variables.overlayOpacity], + extrapolate: 'clamp', + }), + } satisfies ViewStyle), + appContent: { backgroundColor: theme.appBG, overflow: 'hidden', diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index 335ef8382941..da93b335709f 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -15,6 +15,10 @@ function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmal }; } +function getOnboardingModalStyles(styles: ThemeStyles, windowWidth: number, shouldUseNarrowLayout: boolean, isFullScreenWhenSmall = false): ViewStyle { + return shouldUseNarrowLayout ? {width: 500, height: 712} : getCenteredModalStyles(styles, windowWidth, !shouldUseNarrowLayout, isFullScreenWhenSmall); +} + type WindowDimensions = { windowWidth: number; windowHeight: number; @@ -41,11 +45,12 @@ type GetModalStylesStyleUtil = { popoverAnchorPosition?: ViewStyle, innerContainerStyle?: ViewStyle, outerStyle?: ViewStyle, + shouldUseNarrowLayout?: boolean, ) => GetModalStyles; }; const createModalStyleUtils: StyleUtilGenerator = ({theme, styles}) => ({ - getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}): GetModalStyles => { + getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}, shouldUseNarrowLayout = false): GetModalStyles => { const {isSmallScreenWidth, windowWidth} = windowDimensions; let modalStyle: GetModalStyles['modalStyle'] = { @@ -162,7 +167,33 @@ const createModalStyleUtils: StyleUtilGenerator = ({the shouldAddTopSafeAreaMargin = false; shouldAddBottomSafeAreaMargin = false; shouldAddTopSafeAreaPadding = false; - shouldAddBottomSafeAreaPadding = false; + break; + case CONST.MODAL.MODAL_TYPE.ONBOARDING: + // Handles how onboarding modals should be rendered on different screens + modalStyle = { + ...modalStyle, + ...{ + alignItems: 'center', + }, + }; + modalContainerStyle = { + boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)', + borderWidth: 0, + flex: !shouldUseNarrowLayout ? 1 : undefined, + marginTop: 0, + marginBottom: 0, + borderRadius: !shouldUseNarrowLayout ? 0 : 16, + overflow: 'hidden', + ...getOnboardingModalStyles(styles, windowWidth, shouldUseNarrowLayout, true), + }; + + // Allow this modal to be dismissed with a swipe down or swipe right + // swipeDirection = ['down', 'right']; + animationIn = 'fadeIn'; + animationOut = 'fadeOut'; + shouldAddTopSafeAreaMargin = false; + shouldAddBottomSafeAreaMargin = false; + shouldAddTopSafeAreaPadding = false; break; case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED: modalStyle = { From cc0d59f016317092a80d93748a0c9aa2932903ec Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Mon, 12 Feb 2024 11:39:21 +0100 Subject: [PATCH 005/274] Refactor code --- src/components/PurposeForUsingExpensifyModal.tsx | 5 +---- src/components/WorkspaceSwitcherButton.tsx | 2 +- src/hooks/useWindowDimensions/index.ts | 3 --- src/libs/Navigation/NavigationRoot.tsx | 6 ------ 4 files changed, 2 insertions(+), 14 deletions(-) diff --git a/src/components/PurposeForUsingExpensifyModal.tsx b/src/components/PurposeForUsingExpensifyModal.tsx index 175bb4acb698..e65646aeac84 100644 --- a/src/components/PurposeForUsingExpensifyModal.tsx +++ b/src/components/PurposeForUsingExpensifyModal.tsx @@ -23,7 +23,6 @@ import type {MenuItemProps} from './MenuItem'; import MenuItemList from './MenuItemList'; import Modal from './Modal'; import Text from './Text'; -import Navigation from '@libs/Navigation/Navigation'; // This is not translated because it is a message coming from concierge, which only supports english const messageCopy = { @@ -93,7 +92,7 @@ function PurposeForUsingExpensifyModal({isLoadingApp = false}: PurposeForUsingEx const styles = useThemeStyles(); const {isSmallScreenWidth, windowHeight} = useWindowDimensions(); const navigation = useNavigation(); - const [isModalOpen, setIsModalOpen] = useState(true); + const [isModalOpen, setIsModalOpen] = useState(false); const theme = useTheme(); useEffect(() => { @@ -111,13 +110,11 @@ function PurposeForUsingExpensifyModal({isLoadingApp = false}: PurposeForUsingEx const closeModal = useCallback(() => { Report.dismissEngagementModal(); setIsModalOpen(false); - Navigation.goBack(); }, []); const completeModalAndClose = useCallback((message: string, choice: ValueOf) => { Report.completeEngagementModal(message, choice); setIsModalOpen(false); - Navigation.goBack(); Report.navigateToConciergeChat(); }, []); diff --git a/src/components/WorkspaceSwitcherButton.tsx b/src/components/WorkspaceSwitcherButton.tsx index 03e91b1f71ad..b7485fbab7a8 100644 --- a/src/components/WorkspaceSwitcherButton.tsx +++ b/src/components/WorkspaceSwitcherButton.tsx @@ -44,7 +44,7 @@ function WorkspaceSwitcherButton({activeWorkspaceID, policy}: WorkspaceSwitcherB accessible onPress={() => interceptAnonymousUser(() => { - Navigation.navigate(ROUTES.WELCOME); + Navigation.navigate(ROUTES.WORKSPACE_SWITCHER); }) } > diff --git a/src/hooks/useWindowDimensions/index.ts b/src/hooks/useWindowDimensions/index.ts index fdaa96d747c5..b0a29e9f901b 100644 --- a/src/hooks/useWindowDimensions/index.ts +++ b/src/hooks/useWindowDimensions/index.ts @@ -1,6 +1,5 @@ // eslint-disable-next-line no-restricted-imports import {Dimensions, useWindowDimensions} from 'react-native'; -import Log from '@libs/Log'; import variables from '@styles/variables'; import type WindowDimensions from './types'; @@ -16,8 +15,6 @@ export default function (): WindowDimensions { const isMediumScreenWidth = windowWidth > variables.mobileResponsiveWidthBreakpoint && windowWidth <= variables.tabletResponsiveWidthBreakpoint; const isLargeScreenWidth = windowWidth > variables.tabletResponsiveWidthBreakpoint; - Log.info(`WINDOW WIDTH ${windowWidth}`); - return { windowWidth, windowHeight, diff --git a/src/libs/Navigation/NavigationRoot.tsx b/src/libs/Navigation/NavigationRoot.tsx index 76e9cfa9d650..20c426a74c71 100644 --- a/src/libs/Navigation/NavigationRoot.tsx +++ b/src/libs/Navigation/NavigationRoot.tsx @@ -41,8 +41,6 @@ function parseAndLogRoute(state: NavigationState) { return; } - Log.info(`Current state ${JSON.stringify(state)}`); - const currentPath = customGetPathFromState(state, linkingConfig.config); const focusedRoute = findFocusedRoute(state); @@ -76,8 +74,6 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady}: N return undefined; } - return undefined; - const path = initialUrl ? getPathFromURL(initialUrl) : null; // For non-nullable paths we don't want to set initial state @@ -122,8 +118,6 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady}: N if (!state) { return; } - Log.info('STATE'); - Log.info(JSON.stringify(state)); const activeWorkspaceID = getPolicyIDFromState(state as NavigationState); // Performance optimization to avoid context consumers to delay first render setTimeout(() => { From 279a00e27c86d42ecd7b39c03b415fe6c8a04047 Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Mon, 12 Feb 2024 11:57:35 +0100 Subject: [PATCH 006/274] Add top margin on small devices --- .../createCustomBottomTabNavigator/BottomTabBar.tsx | 1 - src/styles/utils/generators/ModalStyleUtils.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx index ef4df063c8a8..91c4c65cc0af 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx @@ -4,7 +4,6 @@ import {View} from 'react-native'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import {PressableWithFeedback} from '@components/Pressable'; -import PurposeForUsingExpensifyModal from '@components/PurposeForUsingExpensifyModal'; import Tooltip from '@components/Tooltip'; import useActiveWorkspace from '@hooks/useActiveWorkspace'; import useLocalize from '@hooks/useLocalize'; diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index da93b335709f..33dbbe6a4b6b 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -191,7 +191,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the // swipeDirection = ['down', 'right']; animationIn = 'fadeIn'; animationOut = 'fadeOut'; - shouldAddTopSafeAreaMargin = false; + shouldAddTopSafeAreaMargin = !shouldUseNarrowLayout; shouldAddBottomSafeAreaMargin = false; shouldAddTopSafeAreaPadding = false; break; From ddd6c4eb18d69aff6039441cfeda8cb8753e2157 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Mon, 12 Feb 2024 16:01:25 +0100 Subject: [PATCH 007/274] add base welcome video modal --- .../OnboardingWelcomeVideoModal.tsx | 61 +++++++++++++++++++ src/languages/en.ts | 7 +++ src/styles/index.ts | 5 ++ src/styles/theme/themes/dark.ts | 1 + src/styles/theme/themes/light.ts | 1 + src/styles/theme/types.ts | 1 + 6 files changed, 76 insertions(+) create mode 100644 src/components/OnboardingWelcomeVideoModal.tsx diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx new file mode 100644 index 000000000000..2dc374b8f78a --- /dev/null +++ b/src/components/OnboardingWelcomeVideoModal.tsx @@ -0,0 +1,61 @@ +import React, {useCallback, useState} from 'react'; +import {View} from 'react-native'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import CONST from '@src/CONST'; +import Button from './Button'; +import Lottie from './Lottie'; +import LottieAnimations from './LottieAnimations'; +import Modal from './Modal'; +import Text from './Text'; + +function OnboardingWelcomeVideoModal() { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const {isSmallScreenWidth, windowHeight} = useWindowDimensions(); + const [isModalOpen, setIsModalOpen] = useState(true); + + const closeModal = useCallback(() => { + setIsModalOpen(false); + }, []); + + return ( + + + + + + ; + + + {translate('onboarding.welcomeVideo.title')} + {translate('onboarding.welcomeVideo.description')} +