From 67a7d8c5cc03d52bfc7a78b0a932c203a36c392e Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 1 Feb 2024 15:46:31 +0100 Subject: [PATCH 01/17] refactor section styling --- src/pages/workspace/reimburse/WorkspaceReimburseView.js | 2 +- src/styles/index.ts | 6 ++++++ src/styles/variables.ts | 2 +- 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js index 039d8e036ef8..8749ea53bfc5 100644 --- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js +++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js @@ -151,7 +151,7 @@ function WorkspaceReimburseView(props) { description={translate('workspace.reimburse.trackDistanceRate')} shouldShowRightIcon onPress={() => Navigation.navigate(ROUTES.WORKSPACE_RATE_AND_UNIT.getRoute(props.policy.id))} - wrapperStyle={[styles.mt3, styles.ph8, styles.mhn8, styles.wAuto]} + wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt3]} brickRoadIndicator={(lodashGet(distanceCustomUnit, 'errors') || lodashGet(distanceCustomRate, 'errors')) && CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR} /> diff --git a/src/styles/index.ts b/src/styles/index.ts index f895352d6d68..58cdf6e8103a 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2573,6 +2573,12 @@ const styles = (theme: ThemeColors) => alignItems: 'center', }, + sectionMenuItemTopDescription: { + ...spacing.ph8, + ...spacing.mhn8, + width: 'auto', + }, + selectCircle: { width: variables.componentSizeSmall, height: variables.componentSizeSmall, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 296780abf0ae..e0e3a3ee8887 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -187,7 +187,7 @@ export default { bankCardHeight: 26, workspaceTypeIconWidth: 34, sectionMargin: 16, - workspaceSectionMaxWidth: 600, + workspaceSectionMaxWidth: 680, sectionIllustrationHeight: 240, photoUploadPopoverWidth: 335, From ce7523dcf7bc1e14543a298867d38e12c6d15ace Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Thu, 1 Feb 2024 15:46:40 +0100 Subject: [PATCH 02/17] new Profile page designs --- src/languages/en.ts | 8 ++ src/pages/settings/Profile/ProfilePage.js | 158 ++++++++++++++++------ 2 files changed, 121 insertions(+), 45 deletions(-) diff --git a/src/languages/en.ts b/src/languages/en.ts index fac9c4af7c75..f192ca4cda1c 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -711,6 +711,14 @@ export default { offline: 'Offline', syncing: 'Syncing', profileAvatar: 'Profile avatar', + publicSection: { + title: 'Public', + subtitle: 'These details are displayed on your public profile, available for people to see.', + }, + privateSection: { + title: 'Private', + subtitle: 'These details are used for travel and payments. They are never shown on your public profile.', + }, }, loungeAccessPage: { loungeAccess: 'Lounge access', diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index c090a478f416..83d207003edd 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -1,23 +1,26 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React, {useEffect} from 'react'; +import React from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; +import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import * as Expensicons from '@components/Icon/Expensicons'; -import MenuItem from '@components/MenuItem'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import ScreenWrapper from '@components/ScreenWrapper'; +import Section from '@components/Section'; import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; +import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as UserUtils from '@libs/UserUtils'; -import userPropTypes from '@pages/settings/userPropTypes'; -import * as App from '@userActions/App'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -36,7 +39,21 @@ const propTypes = { }), ), - user: userPropTypes, + /** User's private personal details */ + privatePersonalDetails: PropTypes.shape({ + legalFirstName: PropTypes.string, + legalLastName: PropTypes.string, + dob: PropTypes.string, + + /** User's home address */ + address: PropTypes.shape({ + street: PropTypes.string, + city: PropTypes.string, + state: PropTypes.string, + zip: PropTypes.string, + country: PropTypes.string, + }), + }), ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -45,12 +62,26 @@ const propTypes = { const defaultProps = { loginList: {}, - user: {}, ...withCurrentUserPersonalDetailsDefaultProps, + privatePersonalDetails: { + legalFirstName: '', + legalLastName: '', + dob: '', + address: { + street: '', + street2: '', + city: '', + state: '', + zip: '', + country: '', + }, + }, }; function ProfilePage(props) { + const theme = useTheme(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const getPronouns = () => { let pronounsKey = lodashGet(props.currentUserPersonalDetails, 'pronouns', ''); if (pronounsKey.startsWith(CONST.PRONOUNS.PREFIX)) { @@ -65,8 +96,13 @@ function ProfilePage(props) { const currentUserDetails = props.currentUserPersonalDetails || {}; const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList); const emojiCode = lodashGet(props, 'currentUserPersonalDetails.status.emojiCode', ''); + const {isSmallScreenWidth} = useWindowDimensions(); + usePrivatePersonalDetails(); + const privateDetails = props.privatePersonalDetails || {}; + const legalName = `${privateDetails.legalFirstName || ''} ${privateDetails.legalLastName || ''}`.trim(); + const isLoadingPersonalDetails = lodashGet(props.privatePersonalDetails, 'isLoading', true); - const profileSettingsOptions = [ + const publicOptions = [ { description: props.translate('displayNamePage.headerTitle'), title: lodashGet(currentUserDetails, 'displayName', ''), @@ -78,13 +114,11 @@ function ProfilePage(props) { pageRoute: ROUTES.SETTINGS_CONTACT_METHODS.route, brickRoadIndicator: contactMethodBrickRoadIndicator, }, - ...[ - { - description: props.translate('statusPage.status'), - title: emojiCode ? `${emojiCode} ${lodashGet(props, 'currentUserPersonalDetails.status.text', '')}` : '', - pageRoute: ROUTES.SETTINGS_STATUS, - }, - ], + { + description: props.translate('statusPage.status'), + title: emojiCode ? `${emojiCode} ${lodashGet(props, 'currentUserPersonalDetails.status.text', '')}` : '', + pageRoute: ROUTES.SETTINGS_STATUS, + }, { description: props.translate('pronounsPage.pronouns'), title: getPronouns(), @@ -97,9 +131,23 @@ function ProfilePage(props) { }, ]; - useEffect(() => { - App.openProfile(props.currentUserPersonalDetails); - }, [props.currentUserPersonalDetails]); + const privateOptions = [ + { + description: props.translate('privatePersonalDetails.legalName'), + title: legalName, + pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME, + }, + { + description: props.translate('common.dob'), + title: privateDetails.dob || '', + pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH, + }, + { + description: props.translate('privatePersonalDetails.address'), + title: PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails), + pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS, + }, + ]; return ( - - {_.map(profileSettingsOptions, (detail, index) => ( - Navigation.navigate(detail.pageRoute)} - brickRoadIndicator={detail.brickRoadIndicator} - /> - ))} + +
+ {_.map(publicOptions, (detail, index) => ( + Navigation.navigate(detail.pageRoute)} + brickRoadIndicator={detail.brickRoadIndicator} + /> + ))} +
+
+ {isLoadingPersonalDetails ? ( + + ) : ( + <> + {_.map(privateOptions, (detail, index) => ( + Navigation.navigate(detail.pageRoute)} + /> + ))} + + )} +
- Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS)} - shouldShowRightIcon - /> - {props.user.hasLoungeAccess && ( - Navigation.navigate(ROUTES.SETTINGS_LOUNGE_ACCESS)} - shouldShowRightIcon - /> - )} ); @@ -158,6 +223,9 @@ export default compose( loginList: { key: ONYXKEYS.LOGIN_LIST, }, + privatePersonalDetails: { + key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, + }, user: { key: ONYXKEYS.USER, }, From e98f871a73fa95a2a4e32e17be59eba0d8c57c42 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 2 Feb 2024 13:53:43 +0100 Subject: [PATCH 03/17] Add title styles and spanish translation --- src/components/Section/index.tsx | 10 +++++----- src/languages/es.ts | 8 ++++++++ src/pages/settings/Profile/ProfilePage.js | 1 + src/styles/index.ts | 4 ++++ 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 58e89d5bff76..17f3e6713d29 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import type {StyleProp, ViewStyle} from 'react-native'; +import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import {View} from 'react-native'; import type {ValueOf} from 'type-fest'; import Lottie from '@components/Lottie'; @@ -42,8 +42,8 @@ type SectionProps = ChildrenProps & { /** Customize the Section container */ containerStyles?: StyleProp; - /** Customize the Section container */ - titleStyles?: StyleProp; + /** Customize the Section title */ + titleStyles?: StyleProp; /** Customize the Section container */ subtitleStyles?: StyleProp; @@ -114,9 +114,9 @@ function Section({ )} - + - {title} + {title} {cardLayout === CARD_LAYOUT.ICON_ON_RIGHT && ( {_.map(publicOptions, (detail, index) => ( color: theme.textSupporting, }, + accountSettingsSectionTitle: { + fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, + }, + sectionMenuItem: { borderRadius: 8, paddingHorizontal: 8, From 5acf846a38faa50d2e6f1d7991a63b67d9427737 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 2 Feb 2024 14:11:25 +0100 Subject: [PATCH 04/17] Apply styles to both sections --- src/pages/settings/Profile/ProfilePage.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 31b535588b30..7a50d022caa0 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -188,6 +188,7 @@ function ProfilePage(props) { isCentralPane subtitleMuted childrenStyles={styles.pt3} + titleStyles={styles.accountSettingsSectionTitle} > {isLoadingPersonalDetails ? ( From b8b5976430821696bd1deb38910ed10704b5e894 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 2 Feb 2024 15:03:25 +0100 Subject: [PATCH 05/17] Fix fontSize and padding --- src/components/Section/index.tsx | 2 +- src/styles/index.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx index 17f3e6713d29..7737927e5307 100644 --- a/src/components/Section/index.tsx +++ b/src/components/Section/index.tsx @@ -127,7 +127,7 @@ function Section({ {!!subtitle && ( - + {subtitle} )} diff --git a/src/styles/index.ts b/src/styles/index.ts index be43dd0a96ea..3ee792eec855 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3369,7 +3369,8 @@ const styles = (theme: ThemeColors) => }, cardSectionTitle: { - lineHeight: variables.lineHeightXXLarge, + fontSize: variables.fontSizeLarge, + lineHeight: variables.lineHeightXLarge, }, cardMenuItem: { From 1160e20c3984c9f8ed2d2e188bf1d392bbbfc555 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 2 Feb 2024 15:26:24 +0100 Subject: [PATCH 06/17] Make title bold --- src/styles/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/index.ts b/src/styles/index.ts index 3ee792eec855..4a87b581159e 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -2580,6 +2580,7 @@ const styles = (theme: ThemeColors) => accountSettingsSectionTitle: { fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, + fontWeight: FontUtils.fontWeight.bold, }, sectionMenuItem: { From e679d5d8dd5b9363c8b4f6ed2b03f9a557a2276f Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Fri, 2 Feb 2024 15:55:08 +0100 Subject: [PATCH 07/17] Fix childrenStyles --- src/pages/settings/Profile/ProfilePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 7a50d022caa0..4e712ba4a445 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -167,7 +167,7 @@ function ProfilePage(props) { subtitle={props.translate('profilePage.publicSection.subtitle')} isCentralPane subtitleMuted - childrenStyles={styles.pt3} + childrenStyles={styles.pt5} titleStyles={styles.accountSettingsSectionTitle} > {_.map(publicOptions, (detail, index) => ( From 34fe83bf9dfcca6998188cb7afb2e303ddf8fe25 Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Fri, 2 Feb 2024 15:47:29 +0100 Subject: [PATCH 08/17] redesign preferences page --- src/components/TestToolMenu.tsx | 10 -- src/components/TestToolRow.tsx | 2 +- src/languages/en.ts | 8 ++ .../settings/Preferences/PreferencesPage.js | 132 +++++++++++------- src/styles/index.ts | 8 ++ 5 files changed, 98 insertions(+), 62 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 410bd5081e25..3766ed71a149 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; -import useThemeStyles from '@hooks/useThemeStyles'; import * as ApiUtils from '@libs/ApiUtils'; import compose from '@libs/compose'; import * as Network from '@userActions/Network'; @@ -14,7 +13,6 @@ import Button from './Button'; import {withNetwork} from './OnyxProvider'; import Switch from './Switch'; import TestToolRow from './TestToolRow'; -import Text from './Text'; type TestToolMenuOnyxProps = { /** User object in Onyx */ @@ -29,17 +27,9 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); - const styles = useThemeStyles(); return ( <> - - Test Preferences - - {/* Option to switch between staging and default api endpoints. This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */} diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx index 4ed1aa126002..f6ff1787b566 100644 --- a/src/components/TestToolRow.tsx +++ b/src/components/TestToolRow.tsx @@ -14,7 +14,7 @@ type TestToolRowProps = { function TestToolRow({title, children}: TestToolRowProps) { const styles = useThemeStyles(); return ( - + {title} diff --git a/src/languages/en.ts b/src/languages/en.ts index 77164c9cc172..012469f95b16 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1045,6 +1045,14 @@ export default { defaultPaymentMethod: 'Default', }, preferencesPage: { + appSection: { + title: 'App preferences', + subtitle: 'That is when you can experience true joy, when you have no fear.', + }, + testSection: { + title: 'Test preferences', + subtitle: 'That is when you can experience true joy, when you have no fear.', + }, receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news', }, priorityModePage: { diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index da0d87afe932..23149b5f9922 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -1,11 +1,13 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React from 'react'; -import {View} from 'react-native'; +import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; +import ScreenWrapper from '@components/ScreenWrapper'; +import Section from '@components/Section'; import Switch from '@components/Switch'; import TestToolMenu from '@components/TestToolMenu'; import Text from '@components/Text'; @@ -49,58 +51,86 @@ function PreferencesPage(props) { const {isSmallScreenWidth} = useWindowDimensions(); return ( - - - - {translate('common.notifications')} - - - - {translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')} - - - - + Navigation.goBack()} + /> + + +
+ + + {translate('common.notifications')} + + + + {translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')} + + + + + + Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)} + wrapperStyle={styles.sectionMenuItemTopDescription} + /> + Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} + wrapperStyle={styles.sectionMenuItemTopDescription} + /> + Navigation.navigate(ROUTES.SETTINGS_THEME)} + wrapperStyle={styles.sectionMenuItemTopDescription} + /> + +
+ {!isProduction && ( +
+ + + +
+ )} - Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)} - /> - Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} - /> - Navigation.navigate(ROUTES.SETTINGS_THEME)} - /> - {/* Enable additional test features in non-production environments */} - {!isProduction && ( - - - - )} - - + + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 4a87b581159e..4f96696d4730 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -529,6 +529,14 @@ const styles = (theme: ThemeColors) => paddingBottom: 1, }, + testRowContainer: { + ...flex.flexRow, + ...flex.justifyContentBetween, + ...flex.alignItemsCenter, + ...sizing.mnw120, + height: 64, + }, + buttonSmall: { borderRadius: variables.buttonBorderRadius, minHeight: variables.componentSizeSmall, From afc70110a803723ad88c9057f6bf427dcafb044b Mon Sep 17 00:00:00 2001 From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com> Date: Mon, 5 Feb 2024 12:50:09 +0100 Subject: [PATCH 09/17] Revert "redesign preferences page" This reverts commit 34fe83bf9dfcca6998188cb7afb2e303ddf8fe25. --- src/components/TestToolMenu.tsx | 10 ++ src/components/TestToolRow.tsx | 2 +- src/languages/en.ts | 8 -- .../settings/Preferences/PreferencesPage.js | 132 +++++++----------- src/styles/index.ts | 8 -- 5 files changed, 62 insertions(+), 98 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 3766ed71a149..410bd5081e25 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -1,6 +1,7 @@ import React from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import useThemeStyles from '@hooks/useThemeStyles'; import * as ApiUtils from '@libs/ApiUtils'; import compose from '@libs/compose'; import * as Network from '@userActions/Network'; @@ -13,6 +14,7 @@ import Button from './Button'; import {withNetwork} from './OnyxProvider'; import Switch from './Switch'; import TestToolRow from './TestToolRow'; +import Text from './Text'; type TestToolMenuOnyxProps = { /** User object in Onyx */ @@ -27,9 +29,17 @@ const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedT function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); + const styles = useThemeStyles(); return ( <> + + Test Preferences + + {/* Option to switch between staging and default api endpoints. This enables QA, internal testers and external devs to take advantage of sandbox environments for 3rd party services like Plaid and Onfido. This toggle is not rendered for internal devs as they make environment changes directly to the .env file. */} diff --git a/src/components/TestToolRow.tsx b/src/components/TestToolRow.tsx index f6ff1787b566..4ed1aa126002 100644 --- a/src/components/TestToolRow.tsx +++ b/src/components/TestToolRow.tsx @@ -14,7 +14,7 @@ type TestToolRowProps = { function TestToolRow({title, children}: TestToolRowProps) { const styles = useThemeStyles(); return ( - + {title} diff --git a/src/languages/en.ts b/src/languages/en.ts index 012469f95b16..77164c9cc172 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1045,14 +1045,6 @@ export default { defaultPaymentMethod: 'Default', }, preferencesPage: { - appSection: { - title: 'App preferences', - subtitle: 'That is when you can experience true joy, when you have no fear.', - }, - testSection: { - title: 'Test preferences', - subtitle: 'That is when you can experience true joy, when you have no fear.', - }, receiveRelevantFeatureUpdatesAndExpensifyNews: 'Receive relevant feature updates and Expensify news', }, priorityModePage: { diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 23149b5f9922..da0d87afe932 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -1,13 +1,11 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React from 'react'; -import {ScrollView, View} from 'react-native'; +import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; -import ScreenWrapper from '@components/ScreenWrapper'; -import Section from '@components/Section'; import Switch from '@components/Switch'; import TestToolMenu from '@components/TestToolMenu'; import Text from '@components/Text'; @@ -51,86 +49,58 @@ function PreferencesPage(props) { const {isSmallScreenWidth} = useWindowDimensions(); return ( - - Navigation.goBack()} - /> - - -
- - - {translate('common.notifications')} - - - - {translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')} - - - - - - Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)} - wrapperStyle={styles.sectionMenuItemTopDescription} - /> - Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} - wrapperStyle={styles.sectionMenuItemTopDescription} - /> - Navigation.navigate(ROUTES.SETTINGS_THEME)} - wrapperStyle={styles.sectionMenuItemTopDescription} - /> - -
- {!isProduction && ( -
- - - -
- )} + + + {translate('common.notifications')} + + + + {translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')} + + + + - - + Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)} + /> + Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} + /> + Navigation.navigate(ROUTES.SETTINGS_THEME)} + /> + {/* Enable additional test features in non-production environments */} + {!isProduction && ( + + + + )} + + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 4f96696d4730..4a87b581159e 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -529,14 +529,6 @@ const styles = (theme: ThemeColors) => paddingBottom: 1, }, - testRowContainer: { - ...flex.flexRow, - ...flex.justifyContentBetween, - ...flex.alignItemsCenter, - ...sizing.mnw120, - height: 64, - }, - buttonSmall: { borderRadius: variables.buttonBorderRadius, minHeight: variables.componentSizeSmall, From 65f460ccaceeec26f6bc296e773b92fc355a2458 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Mon, 5 Feb 2024 13:32:08 +0100 Subject: [PATCH 10/17] Revert unnecessary deleted function --- src/pages/settings/Profile/ProfilePage.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 4e712ba4a445..5d016c64c5dd 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -1,6 +1,6 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React from 'react'; +import React, {useEffect} from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -21,6 +21,7 @@ import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as UserUtils from '@libs/UserUtils'; +import * as App from '@userActions/App'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -131,6 +132,10 @@ function ProfilePage(props) { }, ]; + useEffect(() => { + App.openProfile(props.currentUserPersonalDetails); + }, [props.currentUserPersonalDetails]); + const privateOptions = [ { description: props.translate('privatePersonalDetails.legalName'), From ad0a03c249fc1e3cbdcba801b4eeb6c9220186e5 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Mon, 5 Feb 2024 14:10:29 +0100 Subject: [PATCH 11/17] Fix Personal Information goBack route --- src/libs/actions/PersonalDetails.ts | 6 +++--- src/pages/settings/Profile/PersonalDetails/AddressPage.js | 2 +- .../settings/Profile/PersonalDetails/DateOfBirthPage.js | 2 +- src/pages/settings/Profile/PersonalDetails/LegalNamePage.js | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts index ac044b0bc25b..d25ab3d52035 100644 --- a/src/libs/actions/PersonalDetails.ts +++ b/src/libs/actions/PersonalDetails.ts @@ -182,7 +182,7 @@ function updateLegalName(legalFirstName: string, legalLastName: string) { ], }); - Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS); + Navigation.goBack(ROUTES.SETTINGS_PROFILE); } /** @@ -203,7 +203,7 @@ function updateDateOfBirth({dob}: DateOfBirthForm) { ], }); - Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS); + Navigation.goBack(ROUTES.SETTINGS_PROFILE); } function updateAddress(street: string, street2: string, city: string, state: string, zip: string, country: string) { @@ -240,7 +240,7 @@ function updateAddress(street: string, street2: string, city: string, state: str ], }); - Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS); + Navigation.goBack(ROUTES.SETTINGS_PROFILE); } /** diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index 6c883e7fa9d8..34faa08a8c01 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -122,7 +122,7 @@ function AddressPage({privatePersonalDetails, route}) { Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)} + onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)} /> {isLoadingPersonalDetails ? ( diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js index 9ca8daa69d04..860125ef8849 100644 --- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js +++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js @@ -69,7 +69,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) { > Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)} + onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)} /> {isLoadingPersonalDetails ? ( diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js index 2943bcf19992..f482d0ac4575 100644 --- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js +++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js @@ -90,7 +90,7 @@ function LegalNamePage(props) { > Navigation.goBack(ROUTES.SETTINGS_PERSONAL_DETAILS)} + onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)} /> {isLoadingPersonalDetails ? ( From ce8ecb6ebf454f220aceff612e8049fbb4ebe659 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Mon, 5 Feb 2024 16:42:12 +0100 Subject: [PATCH 12/17] Remove PersonalDetailsPage --- src/ROUTES.ts | 1 - .../AppNavigator/ModalStackNavigators.tsx | 1 - .../FULL_SCREEN_TO_RHP_MAPPING.ts | 1 - src/libs/Navigation/linkingConfig/config.ts | 4 - src/libs/Navigation/types.ts | 1 - .../PersonalDetailsInitialPage.js | 118 ------------------ 6 files changed, 126 deletions(-) delete mode 100644 src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 78b97f8dcde0..6a674d949fd6 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -125,7 +125,6 @@ const ROUTES = { route: 'settings/wallet/card/:domain/activate', getRoute: (domain: string) => `settings/wallet/card/${domain}/activate` as const, }, - SETTINGS_PERSONAL_DETAILS: 'settings/profile/personal-details', SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name', SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth', SETTINGS_PERSONAL_DETAILS_ADDRESS: 'settings/profile/personal-details/address', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 8753c1e277f9..888012b5dc4f 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -203,7 +203,6 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/settings/Profile/DisplayNamePage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.TIMEZONE]: () => require('../../../pages/settings/Profile/TimezoneInitialPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: () => require('../../../pages/settings/Profile/TimezoneSelectPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL]: () => require('../../../pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType, diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts index 64174c7ab724..304257aa316a 100755 --- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts @@ -14,7 +14,6 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial> = { SCREENS.SETTINGS.PROFILE.PRONOUNS, SCREENS.SETTINGS.PROFILE.TIMEZONE, SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT, - SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL, SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME, SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH, SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 33cc0f1739f5..2c4cf7c06eb8 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -190,10 +190,6 @@ const config: LinkingOptions['config'] = { path: ROUTES.SETTINGS_NEW_CONTACT_METHOD.route, exact: true, }, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL]: { - path: ROUTES.SETTINGS_PERSONAL_DETAILS, - exact: true, - }, [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: { path: ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME, exact: true, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index d9f7197df887..2b735bd4645b 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -88,7 +88,6 @@ type SettingsNavigatorParamList = { [SCREENS.SETTINGS.PROFILE.DISPLAY_NAME]: undefined; [SCREENS.SETTINGS.PROFILE.TIMEZONE]: undefined; [SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: undefined; - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.INITIAL]: undefined; [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: undefined; [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: undefined; [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: undefined; diff --git a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js b/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js deleted file mode 100644 index 41e86aa40d98..000000000000 --- a/src/pages/settings/Profile/PersonalDetails/PersonalDetailsInitialPage.js +++ /dev/null @@ -1,118 +0,0 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; -import React from 'react'; -import {ScrollView, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; -import {withNetwork} from '@components/OnyxProvider'; -import ScreenWrapper from '@components/ScreenWrapper'; -import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails'; -import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; -import Navigation from '@libs/Navigation/Navigation'; -import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; -import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; - -const propTypes = { - /* Onyx Props */ - - /** User's private personal details */ - privatePersonalDetails: PropTypes.shape({ - legalFirstName: PropTypes.string, - legalLastName: PropTypes.string, - dob: PropTypes.string, - - /** User's home address */ - address: PropTypes.shape({ - street: PropTypes.string, - city: PropTypes.string, - state: PropTypes.string, - zip: PropTypes.string, - country: PropTypes.string, - }), - }), - - ...withLocalizePropTypes, -}; - -const defaultProps = { - privatePersonalDetails: { - legalFirstName: '', - legalLastName: '', - dob: '', - address: { - street: '', - street2: '', - city: '', - state: '', - zip: '', - country: '', - }, - }, -}; - -function PersonalDetailsInitialPage(props) { - const styles = useThemeStyles(); - usePrivatePersonalDetails(); - const privateDetails = props.privatePersonalDetails || {}; - const legalName = `${privateDetails.legalFirstName || ''} ${privateDetails.legalLastName || ''}`.trim(); - const isLoadingPersonalDetails = lodashGet(props.privatePersonalDetails, 'isLoading', true); - - return ( - - Navigation.goBack()} - /> - {isLoadingPersonalDetails ? ( - - ) : ( - - - - {props.translate('privatePersonalDetails.privateDataMessage')} - - Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME)} - /> - Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH)} - titleStyle={[styles.flex1]} - /> - Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)} - /> - - - )} - - ); -} - -PersonalDetailsInitialPage.propTypes = propTypes; -PersonalDetailsInitialPage.defaultProps = defaultProps; -PersonalDetailsInitialPage.displayName = 'PersonalDetailsInitialPage'; - -export default compose( - withLocalize, - withOnyx({ - privatePersonalDetails: { - key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS, - }, - }), - withNetwork(), -)(PersonalDetailsInitialPage); From 766c54a040906f6fd9f7dd25ac1fb666f2148978 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Mon, 5 Feb 2024 23:11:42 +0100 Subject: [PATCH 13/17] Remove personal-details from all profile routes --- contributingGuides/NAVIGATION.md | 2 +- src/ROUTES.ts | 12 ++++++------ src/SCREENS.ts | 12 ++++-------- src/components/CountrySelector.tsx | 2 +- .../AppNavigator/ModalStackNavigators.tsx | 8 ++++---- .../linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts | 8 ++++---- src/libs/Navigation/linkingConfig/config.ts | 16 ++++++++-------- src/libs/Navigation/types.ts | 8 ++++---- src/pages/settings/Profile/ProfilePage.js | 6 +++--- 9 files changed, 35 insertions(+), 39 deletions(-) diff --git a/contributingGuides/NAVIGATION.md b/contributingGuides/NAVIGATION.md index 543b133fe62b..5bb6dfb85851 100644 --- a/contributingGuides/NAVIGATION.md +++ b/contributingGuides/NAVIGATION.md @@ -30,7 +30,7 @@ When creating RHP flows, you have to remember a couple things: - Since you can deeplink to different pages inside the RHP navigator, it is important to provide the possibility for the user to properly navigate back from any page with UP press (`HeaderWithBackButton` component). -- An example can be deeplinking to `/settings/profile/personal-details`. From there, when pressing the UP button, you should navigate to `/settings/profile`, so in order for it to work, you should provide the correct route in `onBackButtonPress` prop of `HeaderWithBackButton` (`Navigation.goBack(ROUTES.SETTINGS_PROFILE)` in this example). +- An example can be deeplinking to `/settings/profile/timezone/select`. From there, when pressing the UP button, you should navigate to `/settings/profile/timezone`, so in order for it to work, you should provide the correct route in `onBackButtonPress` prop of `HeaderWithBackButton` (`Navigation.goBack(ROUTES.SETTINGS_PROFILE)` in this example). - We use a custom `goBack` function to handle the browser and the `react-navigation` history stack. Under the hood, it resolves to either replacing the current screen with the one we navigate to (deeplinking scenario) or just going back if we reached the current page by navigating in App (pops the screen). It ensures the requested behaviors on web, which is navigating back to the place from where you deeplinked when going into the RHP flow by it. diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 6a674d949fd6..2f1c5144acb1 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -125,12 +125,12 @@ const ROUTES = { route: 'settings/wallet/card/:domain/activate', getRoute: (domain: string) => `settings/wallet/card/${domain}/activate` as const, }, - SETTINGS_PERSONAL_DETAILS_LEGAL_NAME: 'settings/profile/personal-details/legal-name', - SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH: 'settings/profile/personal-details/date-of-birth', - SETTINGS_PERSONAL_DETAILS_ADDRESS: 'settings/profile/personal-details/address', - SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY: { - route: 'settings/profile/personal-details/address/country', - getRoute: (country: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/personal-details/address/country?country=${country}`, backTo), + SETTINGS_LEGAL_NAME: 'settings/profile/legal-name', + SETTINGS_DATE_OF_BIRTH: 'settings/profile/date-of-birth', + SETTINGS_ADDRESS: 'settings/profile/address', + SETTINGS_ADDRESS_COUNTRY: { + route: 'settings/profile/address/country', + getRoute: (country: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/address/country?country=${country}`, backTo), }, SETTINGS_CONTACT_METHODS: { route: 'settings/profile/contact-methods', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index a64bf328ff28..187dada5d13b 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -49,14 +49,10 @@ const SCREENS = { PRONOUNS: 'Settings_Pronouns', TIMEZONE: 'Settings_Timezone', TIMEZONE_SELECT: 'Settings_Timezone_Select', - - PERSONAL_DETAILS: { - INITIAL: 'Settings_PersonalDetails_Initial', - LEGAL_NAME: 'Settings_PersonalDetails_LegalName', - DATE_OF_BIRTH: 'Settings_PersonalDetails_DateOfBirth', - ADDRESS: 'Settings_PersonalDetails_Address', - ADDRESS_COUNTRY: 'Settings_PersonalDetails_Address_Country', - }, + LEGAL_NAME: 'Setting_LegalName', + DATE_OF_BIRTH: 'Settings_DateOfBirth', + ADDRESS: 'Settings_Address', + ADDRESS_COUNTRY: 'Settings_Address_Country', }, PREFERENCES: { diff --git a/src/components/CountrySelector.tsx b/src/components/CountrySelector.tsx index 589530cd7879..50a789638c94 100644 --- a/src/components/CountrySelector.tsx +++ b/src/components/CountrySelector.tsx @@ -47,7 +47,7 @@ function CountrySelector({errorText = '', value: countryCode, onInputChange}: Co description={translate('common.country')} onPress={() => { const activeRoute = Navigation.getActiveRouteWithoutParams(); - Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute)); + Navigation.navigate(ROUTES.SETTINGS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute)); }} /> diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 888012b5dc4f..909726e854e9 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -203,10 +203,10 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/settings/Profile/DisplayNamePage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.TIMEZONE]: () => require('../../../pages/settings/Profile/TimezoneInitialPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: () => require('../../../pages/settings/Profile/TimezoneSelectPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY]: () => require('../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default as React.ComponentType, + [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: () => require('../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default as React.ComponentType, + [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: () => require('../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default as React.ComponentType, + [SCREENS.SETTINGS.PROFILE.ADDRESS]: () => require('../../../pages/settings/Profile/PersonalDetails/AddressPage').default as React.ComponentType, + [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: () => require('../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default as React.ComponentType, [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: () => 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, diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts index 304257aa316a..3dcffae95861 100755 --- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts @@ -14,10 +14,10 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial> = { SCREENS.SETTINGS.PROFILE.PRONOUNS, SCREENS.SETTINGS.PROFILE.TIMEZONE, SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT, - SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME, - SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH, - SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS, - SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY, + SCREENS.SETTINGS.PROFILE.LEGAL_NAME, + SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH, + SCREENS.SETTINGS.PROFILE.ADDRESS, + SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY, ], [SCREENS.SETTINGS.PREFERENCES.ROOT]: [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE, SCREENS.SETTINGS.PREFERENCES.LANGUAGE, SCREENS.SETTINGS.PREFERENCES.THEME], [SCREENS.SETTINGS.WALLET.ROOT]: [ diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 2c4cf7c06eb8..60f0a627e453 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -190,20 +190,20 @@ const config: LinkingOptions['config'] = { path: ROUTES.SETTINGS_NEW_CONTACT_METHOD.route, exact: true, }, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: { - path: ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME, + [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: { + path: ROUTES.SETTINGS_LEGAL_NAME, exact: true, }, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: { - path: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH, + [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: { + path: ROUTES.SETTINGS_DATE_OF_BIRTH, exact: true, }, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: { - path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS, + [SCREENS.SETTINGS.PROFILE.ADDRESS]: { + path: ROUTES.SETTINGS_ADDRESS, exact: true, }, - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY]: { - path: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.route, + [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: { + path: ROUTES.SETTINGS_ADDRESS_COUNTRY.route, exact: true, }, [SCREENS.SETTINGS.TWO_FACTOR_AUTH]: { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 2b735bd4645b..f7ad5d78328a 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -88,10 +88,10 @@ type SettingsNavigatorParamList = { [SCREENS.SETTINGS.PROFILE.DISPLAY_NAME]: undefined; [SCREENS.SETTINGS.PROFILE.TIMEZONE]: undefined; [SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: undefined; - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.LEGAL_NAME]: undefined; - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.DATE_OF_BIRTH]: undefined; - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS]: undefined; - [SCREENS.SETTINGS.PROFILE.PERSONAL_DETAILS.ADDRESS_COUNTRY]: undefined; + [SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: undefined; + [SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: undefined; + [SCREENS.SETTINGS.PROFILE.ADDRESS]: undefined; + [SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: undefined; [SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: undefined; [SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: undefined; [SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: undefined; diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 5d016c64c5dd..db07ea87c81b 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -140,17 +140,17 @@ function ProfilePage(props) { { description: props.translate('privatePersonalDetails.legalName'), title: legalName, - pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_LEGAL_NAME, + pageRoute: ROUTES.SETTINGSLEGAL_NAME, }, { description: props.translate('common.dob'), title: privateDetails.dob || '', - pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_DATE_OF_BIRTH, + pageRoute: ROUTES.SETTINGS_DATE_OF_BIRTH, }, { description: props.translate('privatePersonalDetails.address'), title: PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails), - pageRoute: ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS, + pageRoute: ROUTES.SETTINGS_ADDRESS, }, ]; From 366cb8c05a2d49ed3ab9a64038761ce249f83278 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Tue, 6 Feb 2024 12:45:39 +0100 Subject: [PATCH 14/17] Remove personal-details page naming --- src/SCREENS.ts | 2 +- src/hooks/usePrivatePersonalDetails.ts | 2 +- src/libs/API/types.ts | 4 ++-- src/libs/actions/PersonalDetails.ts | 6 +++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 187dada5d13b..a5471601346a 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -49,7 +49,7 @@ const SCREENS = { PRONOUNS: 'Settings_Pronouns', TIMEZONE: 'Settings_Timezone', TIMEZONE_SELECT: 'Settings_Timezone_Select', - LEGAL_NAME: 'Setting_LegalName', + LEGAL_NAME: 'Settings_LegalName', DATE_OF_BIRTH: 'Settings_DateOfBirth', ADDRESS: 'Settings_Address', ADDRESS_COUNTRY: 'Settings_Address_Country', diff --git a/src/hooks/usePrivatePersonalDetails.ts b/src/hooks/usePrivatePersonalDetails.ts index 89d9951cef11..f17600e9878f 100644 --- a/src/hooks/usePrivatePersonalDetails.ts +++ b/src/hooks/usePrivatePersonalDetails.ts @@ -15,6 +15,6 @@ export default function usePrivatePersonalDetails() { return; } - PersonalDetails.openPersonalDetailsPage(); + PersonalDetails.openPersonalDetails(); }, [network?.isOffline]); } diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index c011fa395f0f..89bb4afbecbc 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -237,7 +237,7 @@ const READ_COMMANDS = { OPEN_WORKSPACE_VIEW: 'OpenWorkspaceView', GET_MAPBOX_ACCESS_TOKEN: 'GetMapboxAccessToken', OPEN_PAYMENTS_PAGE: 'OpenPaymentsPage', - OPEN_PERSONAL_DETAILS_PAGE: 'OpenPersonalDetailsPage', + OPEN_PERSONAL_DETAILS: 'OpenPersonalDetailsPage', OPEN_PUBLIC_PROFILE_PAGE: 'OpenPublicProfilePage', OPEN_PLAID_BANK_LOGIN: 'OpenPlaidBankLogin', OPEN_PLAID_BANK_ACCOUNT_SELECTOR: 'OpenPlaidBankAccountSelector', @@ -271,7 +271,7 @@ type ReadCommandParameters = { [READ_COMMANDS.OPEN_WORKSPACE_VIEW]: EmptyObject; [READ_COMMANDS.GET_MAPBOX_ACCESS_TOKEN]: EmptyObject; [READ_COMMANDS.OPEN_PAYMENTS_PAGE]: EmptyObject; - [READ_COMMANDS.OPEN_PERSONAL_DETAILS_PAGE]: EmptyObject; + [READ_COMMANDS.OPEN_PERSONAL_DETAILS]: EmptyObject; [READ_COMMANDS.OPEN_PUBLIC_PROFILE_PAGE]: Parameters.OpenPublicProfilePageParams; [READ_COMMANDS.OPEN_PLAID_BANK_LOGIN]: Parameters.OpenPlaidBankLoginParams; [READ_COMMANDS.OPEN_PLAID_BANK_ACCOUNT_SELECTOR]: Parameters.OpenPlaidBankAccountSelectorParams; diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts index aed71a0eab84..deb2b0f99b29 100644 --- a/src/libs/actions/PersonalDetails.ts +++ b/src/libs/actions/PersonalDetails.ts @@ -241,7 +241,7 @@ function updateSelectedTimezone(selectedTimezone: SelectedTimezone) { /** * Fetches additional personal data like legal name, date of birth, address */ -function openPersonalDetailsPage() { +function openPersonalDetails() { const optimisticData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, @@ -272,7 +272,7 @@ function openPersonalDetailsPage() { }, ]; - API.read(READ_COMMANDS.OPEN_PERSONAL_DETAILS_PAGE, {}, {optimisticData, successData, failureData}); + API.read(READ_COMMANDS.OPEN_PERSONAL_DETAILS, {}, {optimisticData, successData, failureData}); } /** @@ -455,7 +455,7 @@ export { clearAvatarErrors, deleteAvatar, getPrivatePersonalDetails, - openPersonalDetailsPage, + openPersonalDetails, openPublicProfilePage, updateAddress, updateAutomaticTimezone, From 33608a06eac029291e2ab0500d27dfff339d98e5 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Tue, 6 Feb 2024 15:14:38 +0100 Subject: [PATCH 15/17] Fix typo --- src/pages/settings/Profile/ProfilePage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index db07ea87c81b..0d627efc6e41 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -140,7 +140,7 @@ function ProfilePage(props) { { description: props.translate('privatePersonalDetails.legalName'), title: legalName, - pageRoute: ROUTES.SETTINGSLEGAL_NAME, + pageRoute: ROUTES.SETTINGS_LEGAL_NAME, }, { description: props.translate('common.dob'), From bc774da369f61a9be4f6344f9c40e8f1716aaf87 Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Wed, 7 Feb 2024 13:21:11 +0100 Subject: [PATCH 16/17] Fix goBack --- src/pages/settings/Profile/PersonalDetails/AddressPage.js | 3 +-- src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js | 3 +-- src/pages/settings/Profile/PersonalDetails/LegalNamePage.js | 3 +-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index 34faa08a8c01..55d221085fcb 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -12,7 +12,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import * as PersonalDetails from '@userActions/PersonalDetails'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; const propTypes = { /* Onyx Props */ @@ -122,7 +121,7 @@ function AddressPage({privatePersonalDetails, route}) { Navigation.goBack(ROUTES.SETTINGS_PROFILE)} + onBackButtonPress={() => Navigation.goBack()} /> {isLoadingPersonalDetails ? ( diff --git a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js index 860125ef8849..42fa209e3a8c 100644 --- a/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js +++ b/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.js @@ -18,7 +18,6 @@ import * as ValidationUtils from '@libs/ValidationUtils'; import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; const propTypes = { /* Onyx Props */ @@ -69,7 +68,7 @@ function DateOfBirthPage({translate, privatePersonalDetails}) { > Navigation.goBack(ROUTES.SETTINGS_PROFILE)} + onBackButtonPress={() => Navigation.goBack()} /> {isLoadingPersonalDetails ? ( diff --git a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js index f482d0ac4575..edb54534b76c 100644 --- a/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js +++ b/src/pages/settings/Profile/PersonalDetails/LegalNamePage.js @@ -20,7 +20,6 @@ import * as ValidationUtils from '@libs/ValidationUtils'; import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; const propTypes = { /* Onyx Props */ @@ -90,7 +89,7 @@ function LegalNamePage(props) { > Navigation.goBack(ROUTES.SETTINGS_PROFILE)} + onBackButtonPress={() => Navigation.goBack()} /> {isLoadingPersonalDetails ? ( From 99ba948564c56cfbdfc6860fab7cb5bb52c689ed Mon Sep 17 00:00:00 2001 From: Filip Solecki Date: Wed, 7 Feb 2024 13:32:48 +0100 Subject: [PATCH 17/17] Update submit navigation --- src/libs/actions/PersonalDetails.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts index deb2b0f99b29..53491b386b8c 100644 --- a/src/libs/actions/PersonalDetails.ts +++ b/src/libs/actions/PersonalDetails.ts @@ -112,7 +112,7 @@ function updateLegalName(legalFirstName: string, legalLastName: string) { ], }); - Navigation.goBack(ROUTES.SETTINGS_PROFILE); + Navigation.goBack(); } /** @@ -133,7 +133,7 @@ function updateDateOfBirth({dob}: DateOfBirthForm) { ], }); - Navigation.goBack(ROUTES.SETTINGS_PROFILE); + Navigation.goBack(); } function updateAddress(street: string, street2: string, city: string, state: string, zip: string, country: string) { @@ -170,7 +170,7 @@ function updateAddress(street: string, street2: string, city: string, state: str ], }); - Navigation.goBack(ROUTES.SETTINGS_PROFILE); + Navigation.goBack(); } /**