Use usePrimaryContactMethod fallback on magic code pages after copilot switch

src/pages/MissingPersonalDetails/MissingPersonalDetailsMagicCodePage.tsx

@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo} from 'react';
 import ValidateCodeActionContent from '@components/ValidateCodeActionModal/ValidateCodeActionContent';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import usePrimaryContactMethod from '@hooks/usePrimaryContactMethod';
 import {clearDraftValues} from '@libs/actions/FormActions';
 import {clearPersonalDetailsErrors, updatePersonalDetailsAndShipExpensifyCards} from '@libs/actions/PersonalDetails';
 import {requestValidateCodeAction, resetValidateActionCodeSent} from '@libs/actions/User';
@@ -16,7 +17,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import {primaryLoginSelector} from '@src/selectors/Account';
 import type {PersonalDetailsForm} from '@src/types/form';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import {getSubPageValues} from './utils';
@@ -34,7 +34,7 @@ function MissingPersonalDetailsMagicCodePage({
     const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE);
 
     const [areAllCardsShipped] = useOnyx(ONYXKEYS.CARD_LIST, {selector: areAllExpensifyCardsShipped});
-    const [primaryLogin] = useOnyx(ONYXKEYS.ACCOUNT, {selector: primaryLoginSelector});
+    const primaryLogin = usePrimaryContactMethod();
 
     const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
     const privateDetailsErrors = privatePersonalDetails?.errors ?? undefined;

src/pages/MultifactorAuthentication/ValidateCodePage.tsx

@@ -16,6 +16,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
+import usePrimaryContactMethod from '@hooks/usePrimaryContactMethod';
 import useThemeStyles from '@hooks/useThemeStyles';
 import AccountUtils from '@libs/AccountUtils';
 import {getLatestErrorField, getLatestErrorMessage} from '@libs/ErrorUtils';
@@ -42,7 +43,7 @@ function MultifactorAuthenticationValidateCodePage() {
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [session] = useOnyx(ONYXKEYS.SESSION);
     const [validateActionCode] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
-    const contactMethod = account?.primaryLogin ?? '';
+    const contactMethod = usePrimaryContactMethod();
 
     // Local state
     const [inputCode, setInputCode] = useState('');

src/pages/settings/Wallet/ExpensifyCardPage/ExpensifyCardVerifyAccountPage.tsx

@@ -1,15 +1,14 @@
 import React, {useState} from 'react';
 import ValidateCodeActionContent from '@components/ValidateCodeActionModal/ValidateCodeActionContent';
 import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
+import usePrimaryContactMethod from '@hooks/usePrimaryContactMethod';
 import {revealVirtualCardDetails} from '@libs/actions/Card';
 import {requestValidateCodeAction, resetValidateActionCodeSent} from '@libs/actions/User';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {DomainCardNavigatorParamList, SettingsNavigatorParamList} from '@libs/Navigation/types';
 import type {TranslationPaths} from '@src/languages/types';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import type {ExpensifyCardDetails} from '@src/types/onyx/Card';
@@ -24,8 +23,7 @@ function ExpensifyCardVerifyAccountPage({route}: ExpensifyCardVerifyAccountPageP
     const {cardID} = route.params;
     const {translate} = useLocalize();
     const [validateError, setValidateError] = useState<Errors>({});
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    const primaryLogin = account?.primaryLogin ?? '';
+    const primaryLogin = usePrimaryContactMethod();
     const {setIsCardDetailsLoading, setCardsDetails, setCardsDetailsErrors} = useExpensifyCardActions();
 
     const navigateBack = () => {

src/pages/settings/Wallet/ReportCardLostConfirmMagicCodePage.tsx

@@ -6,6 +6,7 @@ import ValidateCodeActionContent from '@components/ValidateCodeActionModal/Valid
 import useInitialOnyxValue from '@hooks/useInitialOnyxValue';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import usePrimaryContactMethod from '@hooks/usePrimaryContactMethod';
 import {clearCardListErrors, requestReplacementExpensifyCard} from '@libs/actions/Card';
 import {setErrors} from '@libs/actions/FormActions';
 import {requestValidateCodeAction, resetValidateActionCodeSent} from '@libs/actions/User';
@@ -26,10 +27,9 @@ function ReportCardLostConfirmMagicCodePage({
     },
 }: ReportCardLostConfirmMagicCodePageProps) {
     const {translate} = useLocalize();
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [formData] = useOnyx(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM);
 
-    const primaryLogin = account?.primaryLogin ?? '';
+    const primaryLogin = usePrimaryContactMethod();
     const [cardList] = useOnyx(ONYXKEYS.CARD_LIST);
     const initialCardList = useInitialOnyxValue(ONYXKEYS.CARD_LIST);
     const physicalCard = cardList?.[cardID];
@@ -78,7 +78,7 @@ function ReportCardLostConfirmMagicCodePage({
             handleSubmitForm={handleValidateCodeEntered}
             isLoading={formData?.isLoading}
             title={translate('cardPage.validateCardTitle')}
-            descriptionPrimary={translate('cardPage.enterMagicCode', primaryLogin)}
+            descriptionPrimary={translate('cardPage.enterMagicCode', primaryLogin ?? '')}
             sendValidateCode={() => requestValidateCodeAction()}
             validateError={validateError}
             clearError={() => {

src/pages/settings/Wallet/ReportVirtualCardFraudVerifyAccountPage.tsx

@@ -4,6 +4,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNonPersonalCardList from '@hooks/useNonPersonalCardList';
 import useOnyx from '@hooks/useOnyx';
 import usePrevious from '@hooks/usePrevious';
+import usePrimaryContactMethod from '@hooks/usePrimaryContactMethod';
 import {clearCardListErrors, reportVirtualExpensifyCardFraud} from '@libs/actions/Card';
 import {requestValidateCodeAction, resetValidateActionCodeSent} from '@libs/actions/User';
 import {getLatestErrorFieldForAnyField} from '@libs/ErrorUtils';
@@ -26,12 +27,11 @@ function ReportVirtualCardFraudVerifyAccountPage({
     const cardList = useNonPersonalCardList();
     const virtualCard = cardList?.[cardID];
     const {translate} = useLocalize();
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE);
     const [formData] = useOnyx(ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD);
     const latestIssuedVirtualCardID = Object.keys(cardList ?? {})?.pop();
 
-    const primaryLogin = account?.primaryLogin ?? '';
+    const primaryLogin = usePrimaryContactMethod();
     const cardError = getLatestErrorFieldForAnyField(virtualCard);
     const codeError = getLatestErrorFieldForAnyField(validateCodeAction);
     const prevIsLoading = usePrevious(formData?.isLoading);
@@ -70,7 +70,7 @@ function ReportVirtualCardFraudVerifyAccountPage({
     return (
         <ValidateCodeActionContent
             title={translate('cardPage.validateCardTitle')}
-            descriptionPrimary={translate('cardPage.enterMagicCode', primaryLogin)}
+            descriptionPrimary={translate('cardPage.enterMagicCode', primaryLogin ?? '')}
             sendValidateCode={() => requestValidateCodeAction()}
             validateCodeActionErrorField="reportVirtualCard"
             handleSubmitForm={handleValidateCodeEntered}

src/pages/settings/Wallet/TravelCVVPage/TravelCVVVerifyAccountPage.tsx

@@ -2,6 +2,7 @@ import React, {useCallback} from 'react';
 import ValidateCodeActionContent from '@components/ValidateCodeActionModal/ValidateCodeActionContent';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import usePrimaryContactMethod from '@hooks/usePrimaryContactMethod';
 import {revealVirtualCardDetails} from '@libs/actions/Card';
 import {requestValidateCodeAction, resetValidateActionCodeSent} from '@libs/actions/User';
 import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
@@ -18,13 +19,12 @@ import {useTravelCVVActions, useTravelCVVState} from './TravelCVVContextProvider
  */
 function TravelCVVVerifyAccountPage() {
     const {translate} = useLocalize();
-    const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [cardList] = useOnyx(ONYXKEYS.CARD_LIST);
 
     const {isLoading, validateError} = useTravelCVVState();
     const {setCvv, setIsLoading, setValidateError} = useTravelCVVActions();
 
-    const primaryLogin = account?.primaryLogin ?? '';
+    const primaryLogin = usePrimaryContactMethod();
     const travelCard = getTravelInvoicingCard(cardList);
 
     const navigateBack = useCallback(() => {
@@ -57,7 +57,7 @@ function TravelCVVVerifyAccountPage() {
     return (
         <ValidateCodeActionContent
             title={translate('cardPage.validateCardTitle')}
-            descriptionPrimary={translate('cardPage.enterMagicCode', primaryLogin)}
+            descriptionPrimary={translate('cardPage.enterMagicCode', primaryLogin ?? '')}
             sendValidateCode={() => requestValidateCodeAction()}
             validateCodeActionErrorField="revealExpensifyCardDetails"
             handleSubmitForm={handleRevealCardDetails}