Skip to content

Commit 4d65cc7

Browse files
mountinymountiny
authored
Merge pull request #50773 from allgandalf/newPhoneNumberRHPForProfile
[Feature]: Add phone number to the private personal details section
2 parents 75d9877 + c07af88 commit 4d65cc7

File tree

18 files changed

+214
-3
lines changed

18 files changed

+214
-3
lines changed

‎src/CONST.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6017,6 +6017,7 @@ const CONST = {
60176017
HAS_WALLET_TERMS_ERRORS: 'hasWalletTermsErrors',
60186018
HAS_LOGIN_LIST_INFO: 'hasLoginListInfo',
60196019
HAS_SUBSCRIPTION_INFO: 'hasSubscriptionInfo',
6020+
HAS_PHONE_NUMBER_ERROR: 'hasPhoneNumberError',
60206021
},
60216022

60226023
DEBUG: {

‎src/ROUTES.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,7 @@ const ROUTES = {
208208
},
209209
SETTINGS_LEGAL_NAME: 'settings/profile/legal-name',
210210
SETTINGS_DATE_OF_BIRTH: 'settings/profile/date-of-birth',
211+
SETTINGS_PHONE_NUMBER: 'settings/profile/phone',
211212
SETTINGS_ADDRESS: 'settings/profile/address',
212213
SETTINGS_ADDRESS_COUNTRY: {
213214
route: 'settings/profile/address/country',

‎src/SCREENS.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const SCREENS = {
8484
TIMEZONE_SELECT: 'Settings_Timezone_Select',
8585
LEGAL_NAME: 'Settings_LegalName',
8686
DATE_OF_BIRTH: 'Settings_DateOfBirth',
87+
PHONE_NUMBER: 'Settings_PhoneNumber',
8788
ADDRESS: 'Settings_Address',
8889
ADDRESS_COUNTRY: 'Settings_Address_Country',
8990
ADDRESS_STATE: 'Settings_Address_State',

‎src/hooks/useIndicatorStatus.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ function useIndicatorStatus(): IndicatorStatusResult {
2828
const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
2929
const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
3030
const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
31+
const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
3132

3233
// If a policy was just deleted from Onyx, then Onyx will pass a null value to the props, and
3334
// those should be cleaned out before doing any error checking
@@ -57,6 +58,7 @@ function useIndicatorStatus(): IndicatorStatusResult {
5758
[CONST.INDICATOR_STATUS.HAS_LOGIN_LIST_ERROR]: !!loginList && UserUtils.hasLoginListError(loginList),
5859
// Wallet term errors that are not caused by an IOU (we show the red brick indicator for those in the LHN instead)
5960
[CONST.INDICATOR_STATUS.HAS_WALLET_TERMS_ERRORS]: Object.keys(walletTerms?.errors ?? {}).length > 0 && !walletTerms?.chatReportID,
61+
[CONST.INDICATOR_STATUS.HAS_PHONE_NUMBER_ERROR]: !!privatePersonalDetails?.errorFields?.phoneNumber ?? undefined,
6062
};
6163

6264
const infoChecking: Partial<Record<IndicatorStatus, boolean>> = {

‎src/languages/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1783,6 +1783,7 @@ const translations = {
17831783
dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `Date should be after ${dateString}.`,
17841784
hasInvalidCharacter: 'Name can only include Latin characters.',
17851785
incorrectZipFormat: ({zipFormat}: IncorrectZipFormatParams = {}) => `Incorrect zip code format.${zipFormat ? ` Acceptable format: ${zipFormat}` : ''}`,
1786+
invalidPhoneNumber: `Please ensure the phone number is valid (e.g. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
17861787
},
17871788
},
17881789
resendValidationForm: {

‎src/languages/es.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1784,6 +1784,7 @@ const translations = {
17841784
dateShouldBeAfter: ({dateString}: DateShouldBeAfterParams) => `La fecha debe ser posterior a ${dateString}.`,
17851785
incorrectZipFormat: ({zipFormat}: IncorrectZipFormatParams = {}) => `Formato de código postal incorrecto.${zipFormat ? ` Formato aceptable: ${zipFormat}` : ''}`,
17861786
hasInvalidCharacter: 'El nombre sólo puede incluir caracteres latinos.',
1787+
invalidPhoneNumber: `Asegúrese de que el número de teléfono sean válidos (p. ej. ${CONST.EXAMPLE_PHONE_NUMBER}).`,
17871788
},
17881789
},
17891790
resendValidationForm: {

‎src/libs/API/parameters/UpdatePhoneNumberParams.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
type UpdatePhoneNumberParams = {
2+
phoneNumber?: string;
3+
};
4+
5+
export default UpdatePhoneNumberParams;

‎src/libs/API/parameters/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export type {default as UpdateGroupChatMemberRolesParams} from './UpdateGroupCha
7373
export type {default as UpdateHomeAddressParams} from './UpdateHomeAddressParams';
7474
export type {default as UpdatePolicyAddressParams} from './UpdatePolicyAddressParams';
7575
export type {default as UpdateLegalNameParams} from './UpdateLegalNameParams';
76+
export type {default as UpdatePhoneNumberParams} from './UpdatePhoneNumberParams';
7677
export type {default as UpdateNewsletterSubscriptionParams} from './UpdateNewsletterSubscriptionParams';
7778
export type {default as UpdatePersonalInformationForBankAccountParams} from './UpdatePersonalInformationForBankAccountParams';
7879
export type {default as UpdatePreferredEmojiSkinToneParams} from './UpdatePreferredEmojiSkinToneParams';

‎src/libs/API/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ const WRITE_COMMANDS = {
5757
UPDATE_DISPLAY_NAME: 'UpdateDisplayName',
5858
UPDATE_LEGAL_NAME: 'UpdateLegalName',
5959
UPDATE_DATE_OF_BIRTH: 'UpdateDateOfBirth',
60+
UPDATE_PHONE_NUMBER: 'UpdatePhoneNumber',
6061
UPDATE_HOME_ADDRESS: 'UpdateHomeAddress',
6162
UPDATE_POLICY_ADDRESS: 'SetPolicyAddress',
6263
UPDATE_AUTOMATIC_TIMEZONE: 'UpdateAutomaticTimezone',
@@ -466,6 +467,7 @@ type WriteCommandParameters = {
466467
[WRITE_COMMANDS.UPDATE_DISPLAY_NAME]: Parameters.UpdateDisplayNameParams;
467468
[WRITE_COMMANDS.UPDATE_LEGAL_NAME]: Parameters.UpdateLegalNameParams;
468469
[WRITE_COMMANDS.UPDATE_DATE_OF_BIRTH]: Parameters.UpdateDateOfBirthParams;
470+
[WRITE_COMMANDS.UPDATE_PHONE_NUMBER]: Parameters.UpdatePhoneNumberParams;
469471
[WRITE_COMMANDS.UPDATE_POLICY_ADDRESS]: Parameters.UpdatePolicyAddressParams;
470472
[WRITE_COMMANDS.UPDATE_HOME_ADDRESS]: Parameters.UpdateHomeAddressParams;
471473
[WRITE_COMMANDS.UPDATE_AUTOMATIC_TIMEZONE]: Parameters.UpdateAutomaticTimezoneParams;

‎src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
217217
[SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/TimezoneSelectPage').default,
218218
[SCREENS.SETTINGS.PROFILE.LEGAL_NAME]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/LegalNamePage').default,
219219
[SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/DateOfBirthPage').default,
220+
[SCREENS.SETTINGS.PROFILE.PHONE_NUMBER]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/PhoneNumberPage').default,
220221
[SCREENS.SETTINGS.PROFILE.ADDRESS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/PersonalAddressPage').default,
221222
[SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/CountrySelectionPage').default,
222223
[SCREENS.SETTINGS.PROFILE.ADDRESS_STATE]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/StateSelectionPage').default,

‎src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
1616
SCREENS.SETTINGS.PROFILE.TIMEZONE_SELECT,
1717
SCREENS.SETTINGS.PROFILE.LEGAL_NAME,
1818
SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH,
19+
SCREENS.SETTINGS.PROFILE.PHONE_NUMBER,
1920
SCREENS.SETTINGS.PROFILE.ADDRESS,
2021
SCREENS.SETTINGS.PROFILE.ADDRESS_COUNTRY,
2122
SCREENS.SETTINGS.SHARE_CODE,

‎src/libs/Navigation/linkingConfig/config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,10 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
264264
path: ROUTES.SETTINGS_LEGAL_NAME,
265265
exact: true,
266266
},
267+
[SCREENS.SETTINGS.PROFILE.PHONE_NUMBER]: {
268+
path: ROUTES.SETTINGS_PHONE_NUMBER,
269+
exact: true,
270+
},
267271
[SCREENS.SETTINGS.PROFILE.DATE_OF_BIRTH]: {
268272
path: ROUTES.SETTINGS_DATE_OF_BIRTH,
269273
exact: true,

‎src/libs/UserUtils.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import * as defaultAvatars from '@components/Icon/DefaultAvatars';
66
import {ConciergeAvatar, NotificationsAvatar} from '@components/Icon/Expensicons';
77
import CONST from '@src/CONST';
88
import ONYXKEYS from '@src/ONYXKEYS';
9-
import type {Account, LoginList, Session} from '@src/types/onyx';
9+
import type {Account, LoginList, PrivatePersonalDetails, Session} from '@src/types/onyx';
1010
import type Login from '@src/types/onyx/Login';
1111
import type IconAsset from '@src/types/utils/IconAsset';
1212
import hashCode from './hashCode';
@@ -78,6 +78,23 @@ function getLoginListBrickRoadIndicator(loginList: OnyxEntry<LoginList>): LoginL
7878
if (hasLoginListInfo(loginList)) {
7979
return CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
8080
}
81+
82+
return undefined;
83+
}
84+
85+
/**
86+
* Gets the appropriate brick road indicator status for the Profile section.
87+
* Error status is higher priority, so we check for that first.
88+
*/
89+
function getProfilePageBrickRoadIndicator(loginList: OnyxEntry<LoginList>, privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>): LoginListIndicator {
90+
const hasPhoneNumberError = !!privatePersonalDetails?.errorFields?.phoneNumber;
91+
if (hasLoginListError(loginList) || hasPhoneNumberError) {
92+
return CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR;
93+
}
94+
if (hasLoginListInfo(loginList)) {
95+
return CONST.BRICK_ROAD_INDICATOR_STATUS.INFO;
96+
}
97+
8198
return undefined;
8299
}
83100

@@ -240,6 +257,7 @@ export {
240257
getDefaultAvatarURL,
241258
getFullSizeAvatar,
242259
getLoginListBrickRoadIndicator,
260+
getProfilePageBrickRoadIndicator,
243261
getSecondaryPhoneLogin,
244262
getSmallSizeAvatar,
245263
hasLoginListError,

‎src/libs/actions/PersonalDetails.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ import type {
1010
UpdateDisplayNameParams,
1111
UpdateHomeAddressParams,
1212
UpdateLegalNameParams,
13+
UpdatePhoneNumberParams,
1314
UpdatePronounsParams,
1415
UpdateSelectedTimezoneParams,
1516
UpdateUserAvatarParams,
1617
} from '@libs/API/parameters';
1718
import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
1819
import type {CustomRNImageManipulatorResult} from '@libs/cropOrRotateImage/types';
1920
import DateUtils from '@libs/DateUtils';
21+
import * as ErrorUtils from '@libs/ErrorUtils';
2022
import * as LoginUtils from '@libs/LoginUtils';
2123
import Navigation from '@libs/Navigation/Navigation';
2224
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
@@ -157,6 +159,41 @@ function updateDateOfBirth({dob}: DateOfBirthForm) {
157159
Navigation.goBack();
158160
}
159161

162+
function updatePhoneNumber(phoneNumber: string, currenPhoneNumber: string) {
163+
const parameters: UpdatePhoneNumberParams = {phoneNumber};
164+
API.write(WRITE_COMMANDS.UPDATE_PHONE_NUMBER, parameters, {
165+
optimisticData: [
166+
{
167+
onyxMethod: Onyx.METHOD.MERGE,
168+
key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
169+
value: {
170+
phoneNumber,
171+
},
172+
},
173+
],
174+
failureData: [
175+
{
176+
onyxMethod: Onyx.METHOD.MERGE,
177+
key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
178+
value: {
179+
phoneNumber: currenPhoneNumber,
180+
errorFields: {
181+
phoneNumber: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('privatePersonalDetails.error.invalidPhoneNumber'),
182+
},
183+
},
184+
},
185+
],
186+
});
187+
}
188+
189+
function clearPhoneNumberError() {
190+
Onyx.merge(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {
191+
errorFields: {
192+
phoneNumber: null,
193+
},
194+
});
195+
}
196+
160197
function updateAddress(street: string, street2: string, city: string, state: string, zip: string, country: Country | '') {
161198
const parameters: UpdateHomeAddressParams = {
162199
homeAddressStreet: street,
@@ -480,6 +517,8 @@ export {
480517
setDisplayName,
481518
updateDisplayName,
482519
updateLegalName,
520+
updatePhoneNumber,
521+
clearPhoneNumberError,
483522
updatePronouns,
484523
updateSelectedTimezone,
485524
updatePersonalDetailsAndShipExpensifyCards,

‎src/pages/settings/InitialSettingsPage.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
8080
const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
8181
const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
8282
const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
83+
const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
8384

8485
const network = useNetwork();
8586
const theme = useTheme();
@@ -126,7 +127,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
126127
* @returns object with translationKey, style and items for the account section
127128
*/
128129
const accountMenuItemsData: Menu = useMemo(() => {
129-
const profileBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(loginList);
130+
const profileBrickRoadIndicator = UserUtils.getProfilePageBrickRoadIndicator(loginList, privatePersonalDetails);
130131
const paymentCardList = fundList;
131132
const defaultMenu: Menu = {
132133
sectionStyle: styles.accountSettingsSectionContainer,
@@ -161,7 +162,7 @@ function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPagePr
161162
};
162163

163164
return defaultMenu;
164-
}, [loginList, fundList, styles.accountSettingsSectionContainer, bankAccountList, userWallet?.errors, walletTerms?.errors]);
165+
}, [loginList, fundList, styles.accountSettingsSectionContainer, bankAccountList, userWallet?.errors, walletTerms?.errors, privatePersonalDetails]);
165166

166167
/**
167168
* Retuns a list of menu items data for workspace section

‎src/pages/settings/Profile/PersonalDetails/PhoneNumberPage.tsx

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import {Str} from 'expensify-common';
2+
import React, {useCallback} from 'react';
3+
import {useOnyx} from 'react-native-onyx';
4+
import FormProvider from '@components/Form/FormProvider';
5+
import InputWrapper from '@components/Form/InputWrapper';
6+
import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
7+
import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
8+
import HeaderWithBackButton from '@components/HeaderWithBackButton';
9+
import OfflineWithFeedback from '@components/OfflineWithFeedback';
10+
import ScreenWrapper from '@components/ScreenWrapper';
11+
import TextInput from '@components/TextInput';
12+
import useLocalize from '@hooks/useLocalize';
13+
import useThemeStyles from '@hooks/useThemeStyles';
14+
import * as ErrorUtils from '@libs/ErrorUtils';
15+
import * as LoginUtils from '@libs/LoginUtils';
16+
import Navigation from '@libs/Navigation/Navigation';
17+
import * as PhoneNumberUtils from '@libs/PhoneNumber';
18+
import * as ValidationUtils from '@libs/ValidationUtils';
19+
import * as PersonalDetails from '@userActions/PersonalDetails';
20+
import CONST from '@src/CONST';
21+
import ONYXKEYS from '@src/ONYXKEYS';
22+
import INPUT_IDS from '@src/types/form/PersonalDetailsForm';
23+
import type {PrivatePersonalDetails} from '@src/types/onyx';
24+
25+
function PhoneNumberPage() {
26+
const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS);
27+
const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
28+
const styles = useThemeStyles();
29+
const {translate} = useLocalize();
30+
const phoneNumber = privatePersonalDetails?.phoneNumber ?? '';
31+
32+
const validateLoginError = ErrorUtils.getEarliestErrorField(privatePersonalDetails, 'phoneNumber');
33+
const currenPhoneNumber = privatePersonalDetails?.phoneNumber ?? '';
34+
35+
const updatePhoneNumber = (values: PrivatePersonalDetails) => {
36+
// Clear the error when the user tries to submit the form
37+
if (validateLoginError) {
38+
PersonalDetails.clearPhoneNumberError();
39+
}
40+
41+
// Only call the API if the user has changed their phone number
42+
if (phoneNumber !== values?.phoneNumber) {
43+
PersonalDetails.updatePhoneNumber(values?.phoneNumber ?? '', currenPhoneNumber);
44+
}
45+
46+
Navigation.goBack();
47+
};
48+
49+
const validate = useCallback(
50+
(values: FormOnyxValues<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> => {
51+
const errors: FormInputErrors<typeof ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM> = {};
52+
if (!ValidationUtils.isRequiredFulfilled(values[INPUT_IDS.PHONE_NUMBER])) {
53+
errors[INPUT_IDS.PHONE_NUMBER] = translate('common.error.fieldRequired');
54+
}
55+
const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(values[INPUT_IDS.PHONE_NUMBER]);
56+
const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);
57+
if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumberWithCountryCode.slice(0))) {
58+
errors[INPUT_IDS.PHONE_NUMBER] = translate('bankAccount.error.phoneNumber');
59+
}
60+
61+
// Clear the error when the user tries to validate the form and there are errors
62+
if (validateLoginError && !!errors) {
63+
PersonalDetails.clearPhoneNumberError();
64+
}
65+
return errors;
66+
},
67+
[translate, validateLoginError],
68+
);
69+
70+
return (
71+
<ScreenWrapper
72+
includeSafeAreaPaddingBottom={false}
73+
shouldEnableMaxHeight
74+
testID={PhoneNumberPage.displayName}
75+
>
76+
<HeaderWithBackButton
77+
title={translate('common.phoneNumber')}
78+
onBackButtonPress={() => Navigation.goBack()}
79+
/>
80+
{isLoadingApp ? (
81+
<FullscreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
82+
) : (
83+
<FormProvider
84+
style={[styles.flexGrow1, styles.ph5]}
85+
formID={ONYXKEYS.FORMS.PERSONAL_DETAILS_FORM}
86+
validate={validate}
87+
onSubmit={updatePhoneNumber}
88+
submitButtonText={translate('common.save')}
89+
enabledWhenOffline
90+
>
91+
<OfflineWithFeedback
92+
errors={validateLoginError}
93+
errorRowStyles={styles.mt2}
94+
onClose={() => PersonalDetails.clearPhoneNumberError()}
95+
>
96+
<InputWrapper
97+
InputComponent={TextInput}
98+
inputID={INPUT_IDS.PHONE_NUMBER}
99+
name="lfname"
100+
label={translate('common.phoneNumber')}
101+
aria-label={translate('common.phoneNumber')}
102+
role={CONST.ROLE.PRESENTATION}
103+
defaultValue={phoneNumber}
104+
spellCheck={false}
105+
onBlur={() => {
106+
if (!validateLoginError) {
107+
return;
108+
}
109+
PersonalDetails.clearPhoneNumberError();
110+
}}
111+
/>
112+
</OfflineWithFeedback>
113+
</FormProvider>
114+
)}
115+
</ScreenWrapper>
116+
);
117+
}
118+
119+
PhoneNumberPage.displayName = 'PhoneNumberPage';
120+
121+
export default PhoneNumberPage;

‎src/pages/settings/Profile/ProfilePage.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,12 @@ function ProfilePage() {
9696
title: privateDetails.dob ?? '',
9797
pageRoute: ROUTES.SETTINGS_DATE_OF_BIRTH,
9898
},
99+
{
100+
description: translate('common.phoneNumber'),
101+
title: privateDetails.phoneNumber ?? '',
102+
pageRoute: ROUTES.SETTINGS_PHONE_NUMBER,
103+
brickRoadIndicator: privatePersonalDetails?.errorFields?.phoneNumber ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined,
104+
},
99105
{
100106
description: translate('privatePersonalDetails.address'),
101107
title: PersonalDetailsUtils.getFormattedAddress(privateDetails),
@@ -195,6 +201,7 @@ function ProfilePage() {
195201
description={detail.description}
196202
wrapperStyle={styles.sectionMenuItemTopDescription}
197203
onPress={() => Navigation.navigate(detail.pageRoute)}
204+
brickRoadIndicator={detail.brickRoadIndicator}
198205
/>
199206
))}
200207
</>

0 commit comments

Comments
 (0)