Merge pull request #52082 from NJ-2020/fix/51491-wallet-page

fix wallet phone validation page

Author: chiragsalian

src/libs/GetPhysicalCardUtils.ts

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import type {OnyxEntry} from 'react-native-onyx';
 import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
@@ -6,16 +7,19 @@ import type {LoginList, PrivatePersonalDetails} from '@src/types/onyx';
 import * as LoginUtils from './LoginUtils';
 import Navigation from './Navigation/Navigation';
 import * as PersonalDetailsUtils from './PersonalDetailsUtils';
+import * as PhoneNumberUtils from './PhoneNumber';
 import * as UserUtils from './UserUtils';
 
 function getCurrentRoute(domain: string, privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>): Route {
     const {legalFirstName, legalLastName, phoneNumber} = privatePersonalDetails ?? {};
     const address = PersonalDetailsUtils.getCurrentAddress(privatePersonalDetails);
+    const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(phoneNumber ?? '');
+    const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);
 
     if (!legalFirstName && !legalLastName) {
         return ROUTES.SETTINGS_WALLET_CARD_GET_PHYSICAL_NAME.getRoute(domain);
     }
-    if (!phoneNumber || !LoginUtils.validateNumber(phoneNumber)) {
+    if (!phoneNumber || !parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumberWithCountryCode.slice(0))) {
         return ROUTES.SETTINGS_WALLET_CARD_GET_PHYSICAL_PHONE.getRoute(domain);
     }
     if (!(address?.street && address?.city && address?.state && address?.country && address?.zip)) {

src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx

@@ -1,3 +1,4 @@
+import {Str} from 'expensify-common';
 import React from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -8,6 +9,8 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as LoginUtils from '@libs/LoginUtils';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import * as PhoneNumberUtils from '@libs/PhoneNumber';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -40,12 +43,17 @@ function GetPhysicalCardPhone({
 
         const errors: OnValidateResult = {};
 
-        if (!LoginUtils.validateNumber(phoneNumberToValidate)) {
-            errors.phoneNumber = translate('common.error.phoneNumber');
-        } else if (!phoneNumberToValidate) {
+        if (!ValidationUtils.isRequiredFulfilled(phoneNumberToValidate)) {
             errors.phoneNumber = translate('common.error.fieldRequired');
         }
 
+        const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(phoneNumberToValidate);
+        const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);
+
+        if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumberWithCountryCode.slice(0))) {
+            errors.phoneNumber = translate('bankAccount.error.phoneNumber');
+        }
+
         return errors;
     };