Merge pull request #49150 from nkdengineer/fix/48968

Missing email in RHP header and message when adding new contact

src/libs/UserUtils.ts

@@ -1,10 +1,12 @@
 import {Str} from 'expensify-common';
 import type {OnyxEntry} from 'react-native-onyx';
+import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import * as defaultAvatars from '@components/Icon/DefaultAvatars';
 import {ConciergeAvatar, NotificationsAvatar} from '@components/Icon/Expensicons';
 import CONST from '@src/CONST';
-import type {LoginList} from '@src/types/onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Account, LoginList, Session} from '@src/types/onyx';
 import type Login from '@src/types/onyx/Login';
 import type IconAsset from '@src/types/utils/IconAsset';
 import hashCode from './hashCode';
@@ -15,6 +17,22 @@ type AvatarSource = IconAsset | string;
 
 type LoginListIndicator = ValueOf<typeof CONST.BRICK_ROAD_INDICATOR_STATUS> | undefined;
 
+let account: OnyxEntry<Account>;
+Onyx.connect({
+    key: ONYXKEYS.ACCOUNT,
+    callback: (value) => {
+        account = value ?? {};
+    },
+});
+
+let session: OnyxEntry<Session>;
+Onyx.connect({
+    key: ONYXKEYS.SESSION,
+    callback: (value) => {
+        session = value ?? {};
+    },
+});
+
 /**
  * Searches through given loginList for any contact method / login with an error.
  *
@@ -208,6 +226,13 @@ function getSecondaryPhoneLogin(loginList: OnyxEntry<Login>): string | undefined
     return parsedLoginList.find((login) => Str.isValidE164Phone(login));
 }
 
+/**
+ * Gets the contact method
+ */
+function getContactMethod(): string {
+    return account?.primaryLogin ?? session?.email ?? '';
+}
+
 export {
     generateAccountID,
     getAvatar,
@@ -221,5 +246,6 @@ export {
     hasLoginListInfo,
     hashText,
     isDefaultAvatar,
+    getContactMethod,
 };
 export type {AvatarSource, LoginListIndicator};

src/pages/settings/Profile/Contacts/NewContactMethodPage.tsx

@@ -2,8 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
@@ -20,30 +19,25 @@ import * as ErrorUtils from '@libs/ErrorUtils';
 import * as LoginUtils from '@libs/LoginUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import * as UserUtils from '@libs/UserUtils';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/NewContactMethodForm';
-import type {LoginList} from '@src/types/onyx';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 
-type NewContactMethodPageOnyxProps = {
-    /** Login list for the user that is signed in */
-    loginList: OnyxEntry<LoginList>;
-};
+type NewContactMethodPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD>;
 
-type NewContactMethodPageProps = NewContactMethodPageOnyxProps & StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD>;
-
-function NewContactMethodPage({loginList, route}: NewContactMethodPageProps) {
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    const contactMethod = account?.primaryLogin ?? '';
+function NewContactMethodPage({route}: NewContactMethodPageProps) {
+    const contactMethod = UserUtils.getContactMethod();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const loginInputRef = useRef<AnimatedTextInputRef>(null);
     const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
     const [pendingContactAction] = useOnyx(ONYXKEYS.PENDING_CONTACT_ACTION);
+    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
     const loginData = loginList?.[pendingContactAction?.contactMethod ?? contactMethod];
     const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
 
@@ -161,6 +155,4 @@ function NewContactMethodPage({loginList, route}: NewContactMethodPageProps) {
 
 NewContactMethodPage.displayName = 'NewContactMethodPage';
 
-export default withOnyx<NewContactMethodPageProps, NewContactMethodPageOnyxProps>({
-    loginList: {key: ONYXKEYS.LOGIN_LIST},
-})(NewContactMethodPage);
+export default NewContactMethodPage;

src/pages/settings/Profile/Contacts/ValidateContactActionPage.tsx

@@ -8,13 +8,14 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as User from '@libs/actions/User';
 import Navigation from '@libs/Navigation/Navigation';
+import * as UserUtils from '@libs/UserUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import ValidateCodeForm from './ValidateCodeForm';
 import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm';
 
 function ValidateContactActionPage() {
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+    const contactMethod = UserUtils.getContactMethod();
     const themeStyles = useThemeStyles();
     const {translate} = useLocalize();
     const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);
@@ -45,22 +46,22 @@ function ValidateContactActionPage() {
             offlineIndicatorStyle={themeStyles.mtAuto}
         >
             <HeaderWithBackButton
-                title={account?.primaryLogin ?? ''}
+                title={contactMethod}
                 onBackButtonPress={onBackButtonPress}
             />
             <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb7]}>
                 <DotIndicatorMessage
                     type="success"
                     style={[themeStyles.mb3]}
                     // eslint-disable-next-line @typescript-eslint/naming-convention
-                    messages={{0: translate('contacts.enterMagicCode', {contactMethod: account?.primaryLogin ?? ''})}}
+                    messages={{0: translate('contacts.enterMagicCode', {contactMethod})}}
                 />
                 <ValidateCodeForm
                     isValidatingAction
                     loginList={loginList}
                     ref={validateCodeFormRef}
                     pendingContact={pendingContactAction}
-                    contactMethod={account?.primaryLogin ?? ''}
+                    contactMethod={contactMethod}
                 />
             </View>
         </ScreenWrapper>

src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx

@@ -1,11 +1,10 @@
 import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
 import Button from '@components/Button';
 import FixedFooter from '@components/FixedFooter';
 import * as Expensicons from '@components/Icon/Expensicons';
-import {useSession} from '@components/OnyxProvider';
 import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayToggle';
 import QRCode from '@components/QRCode';
 import ScrollView from '@components/ScrollView';
@@ -14,23 +13,22 @@ import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Clipboard from '@libs/Clipboard';
+import * as UserUtils from '@libs/UserUtils';
 import StepWrapper from '@pages/settings/Security/TwoFactorAuth/StepWrapper/StepWrapper';
 import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import TwoFactorAuthForm from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm';
-import type {BaseTwoFactorAuthFormOnyxProps, BaseTwoFactorAuthFormRef} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types';
+import type {BaseTwoFactorAuthFormRef} from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/types';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const TROUBLESHOOTING_LINK = 'https://community.expensify.com/discussion/7736/faq-troubleshooting-two-factor-authentication-issues/p1?new=1';
 
-type VerifyStepProps = BaseTwoFactorAuthFormOnyxProps;
-
-function VerifyStep({account}: VerifyStepProps) {
+function VerifyStep() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const session = useSession();
-
+    const contactMethod = UserUtils.getContactMethod();
+    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const formRef = useRef<BaseTwoFactorAuthFormRef>(null);
 
     const {setStep} = useTwoFactorAuthContext();
@@ -65,7 +63,7 @@ function VerifyStep({account}: VerifyStepProps) {
      * so it can be detected by authenticator apps
      */
     function buildAuthenticatorUrl() {
-        return `otpauth://totp/Expensify:${account?.primaryLogin ?? session?.email}?secret=${account?.twoFactorAuthSecretKey}&issuer=Expensify`;
+        return `otpauth://totp/Expensify:${contactMethod}?secret=${account?.twoFactorAuthSecretKey}&issuer=Expensify`;
     }
 
     return (
@@ -138,6 +136,4 @@ function VerifyStep({account}: VerifyStepProps) {
 
 VerifyStep.displayName = 'VerifyStep';
 
-export default withOnyx<VerifyStepProps, BaseTwoFactorAuthFormOnyxProps>({
-    account: {key: ONYXKEYS.ACCOUNT},
-})(VerifyStep);
+export default VerifyStep;