[TS migration] Migrate 'ValidateCodeForm' component to TypeScript

src/components/LocaleContextProvider.tsx

@@ -45,7 +45,7 @@ type LocaleContextProps = {
 
     /** Returns a locally converted phone number for numbers from the same region
      * and an internationally converted phone number with the country code for numbers from other regions */
-    formatPhoneNumber: (phoneNumber: string | undefined) => string;
+    formatPhoneNumber: (phoneNumber: string) => string;
 
     /** Gets the locale digit corresponding to a standard digit */
     toLocaleDigit: (digit: string) => string;

src/components/MagicCodeInput.tsx

@@ -430,3 +430,4 @@ function MagicCodeInput(
 MagicCodeInput.displayName = 'MagicCodeInput';
 
 export default forwardRef(MagicCodeInput);
+export type {MagicCodeInputHandle};

src/components/withToggleVisibilityView.tsx

@@ -7,7 +7,7 @@ import getComponentDisplayName from '@libs/getComponentDisplayName';
 
 type WithToggleVisibilityViewProps = {
     /** Whether the content is visible. */
-    isVisible?: boolean;
+    isVisible: boolean;
 };
 
 export default function withToggleVisibilityView<TProps extends WithToggleVisibilityViewProps, TRef>(

src/libs/LocalePhoneNumber.ts

@@ -13,7 +13,7 @@ Onyx.connect({
  * Returns a locally converted phone number for numbers from the same region
  * and an internationally converted phone number with the country code for numbers from other regions
  */
-function formatPhoneNumber(number: string | undefined): string {
+function formatPhoneNumber(number: string): string {
     if (!number) {
         return '';
     }

src/pages/RoomMembersPage.tsx

@@ -188,7 +188,7 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
                 isSelected: selectedMembers.includes(accountID),
                 isDisabled: accountID === session?.accountID,
                 text: formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)),
-                alternateText: formatPhoneNumber(details.login),
+                alternateText: details?.login ? formatPhoneNumber(details.login) : '',
                 icons: [
                     {
                         source: UserUtils.getAvatar(details.avatar, accountID),

src/pages/settings/Security/CloseAccountPage.tsx

@@ -67,16 +67,16 @@ function CloseAccountPage({session}: CloseAccountPageProps) {
     const sanitizePhoneOrEmail = (phoneOrEmail: string): string => phoneOrEmail.replace(/\s+/g, '').toLowerCase();
 
     const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM> => {
-        const userEmailOrPhone = formatPhoneNumber(session?.email);
+        const userEmailOrPhone = session?.email ? formatPhoneNumber(session.email) : null;
         const errors = ValidationUtils.getFieldRequiredErrors(values, ['phoneOrEmail']);
 
-        if (values.phoneOrEmail && sanitizePhoneOrEmail(userEmailOrPhone) !== sanitizePhoneOrEmail(values.phoneOrEmail)) {
+        if (values.phoneOrEmail && userEmailOrPhone && sanitizePhoneOrEmail(userEmailOrPhone) !== sanitizePhoneOrEmail(values.phoneOrEmail)) {
             errors.phoneOrEmail = 'closeAccountPage.enterYourDefaultContactMethod';
         }
         return errors;
     };
 
-    const userEmailOrPhone = formatPhoneNumber(session?.email);
+    const userEmailOrPhone = session?.email ? formatPhoneNumber(session.email) : null;
 
     return (
         <ScreenWrapper
@@ -118,7 +118,7 @@ function CloseAccountPage({session}: CloseAccountPageProps) {
                         role={CONST.ROLE.PRESENTATION}
                         containerStyles={[styles.mt5]}
                         autoCorrect={false}
-                        inputMode={Str.isValidEmail(userEmailOrPhone) ? CONST.INPUT_MODE.EMAIL : CONST.INPUT_MODE.TEXT}
+                        inputMode={userEmailOrPhone && Str.isValidEmail(userEmailOrPhone) ? CONST.INPUT_MODE.EMAIL : CONST.INPUT_MODE.TEXT}
                     />
                     <ConfirmModal
                         danger

src/pages/signin/ChangeExpensifyLoginLink.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Credentials} from '@src/types/onyx';
+
+type ChangeExpensifyLoginLinkOnyxProps = {
+    /** The credentials of the person logging in */
+    credentials: OnyxEntry<Credentials>;
+};
+
+type ChangeExpensifyLoginLinkProps = ChangeExpensifyLoginLinkOnyxProps & {
+    onPress: () => void;
+};
+
+function ChangeExpensifyLoginLink({credentials, onPress}: ChangeExpensifyLoginLinkProps) {
+    const styles = useThemeStyles();
+    const {translate, formatPhoneNumber} = useLocalize();
+
+    return (
+        <View style={[styles.changeExpensifyLoginLinkContainer, styles.mt3]}>
+            {!!credentials?.login && <Text style={styles.mr1}>{translate('loginForm.notYou', {user: formatPhoneNumber(credentials.login)})}</Text>}
+            <PressableWithFeedback
+                style={[styles.link]}
+                onPress={onPress}
+                role={CONST.ROLE.LINK}
+                accessibilityLabel={translate('common.goBack')}
+            >
+                <Text style={[styles.link]}>{translate('common.goBack')}.</Text>
+            </PressableWithFeedback>
+        </View>
+    );
+}
+
+ChangeExpensifyLoginLink.displayName = 'ChangeExpensifyLoginLink';
+
+export default withOnyx<ChangeExpensifyLoginLinkProps, ChangeExpensifyLoginLinkOnyxProps>({
+    credentials: {
+        key: ONYXKEYS.CREDENTIALS,
+    },
+})(ChangeExpensifyLoginLink);

src/pages/signin/ChooseSSOOrMagicCode.tsx

@@ -81,10 +81,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos
                     }}
                 />
                 {!!account && !isEmptyObject(account.errors) && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(account)} />}
-                <ChangeExpensifyLoginLink
-                    // @ts-expect-error TODO: Remove this once https://github.com/Expensify/App/pull/35404 is merged
-                    onPress={() => Session.clearSignInData()}
-                />
+                <ChangeExpensifyLoginLink onPress={() => Session.clearSignInData()} />
             </View>
             <View style={[styles.mt5, styles.signInPageWelcomeTextContainer]}>
                 <Terms />

src/pages/signin/SignInPage.tsx

@@ -267,7 +267,6 @@ function SignInPageInner({credentials, account, activeClients = [], preferredLoc
                 />
                 {shouldShowValidateCodeForm && (
                     <ValidateCodeForm
-                        // @ts-expect-error TODO: Remove this once https://github.com/Expensify/App/pull/35404 is merged
                         isVisible={!shouldShowAnotherLoginPageOpenedMessage}
                         isUsingRecoveryCode={isUsingRecoveryCode}
                         setIsUsingRecoveryCode={setIsUsingRecoveryCode}