diff --git a/src/ROUTES.ts b/src/ROUTES.ts index dfcb42d3c4fe..f70be8ff29e4 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -149,6 +149,7 @@ const ROUTES = { SETTINGS_ABOUT: 'settings/about', SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links', SETTINGS_WALLET: 'settings/wallet', + SETTINGS_WALLET_VERIFY_ACCOUNT: {route: 'settings/wallet/verify', getRoute: (backTo?: string) => getUrlWithBackToParam('settings/wallet/verify', backTo)}, SETTINGS_WALLET_DOMAINCARD: { route: 'settings/wallet/card/:cardID?', getRoute: (cardID: string) => `settings/wallet/card/${cardID}` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 395f1c4d5fb1..9a94d612dc80 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -112,6 +112,7 @@ const SCREENS = { CARD_ACTIVATE: 'Settings_Wallet_Card_Activate', REPORT_VIRTUAL_CARD_FRAUD: 'Settings_Wallet_ReportVirtualCardFraud', CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS: 'Settings_Wallet_Cards_Digital_Details_Update_Address', + VERIFY_ACCOUNT: 'Settings_Wallet_Verify_Account', }, EXIT_SURVEY: { diff --git a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx index 247c0c606901..1716249c597d 100644 --- a/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -2,8 +2,8 @@ import {useFocusEffect} from '@react-navigation/native'; import type {ForwardedRef} from 'react'; import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import type {StyleProp, ViewStyle} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import DotIndicatorMessage from '@components/DotIndicatorMessage'; import MagicCodeInput from '@components/MagicCodeInput'; @@ -22,7 +22,7 @@ import * as User from '@userActions/User'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Account, ValidateMagicCodeAction} from '@src/types/onyx'; +import type {ValidateMagicCodeAction} from '@src/types/onyx'; import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -35,11 +35,6 @@ type ValidateCodeFormError = { validateCode?: TranslationPaths; }; -type BaseValidateCodeFormOnyxProps = { - /** The details about the account that the user is signing in with */ - account: OnyxEntry; -}; - type ValidateCodeFormProps = { /** If the magic code has been resent previously */ hasMagicCodeBeenSent?: boolean; @@ -62,14 +57,14 @@ type ValidateCodeFormProps = { /** Function is called when submitting form */ handleSubmitForm: (validateCode: string) => void; + /** Styles for the button */ + buttonStyles?: StyleProp; + /** Function to clear error of the form */ clearError: () => void; }; -type BaseValidateCodeFormProps = BaseValidateCodeFormOnyxProps & ValidateCodeFormProps; - function BaseValidateCodeForm({ - account = {}, hasMagicCodeBeenSent, autoComplete = 'one-time-code', innerRef = () => {}, @@ -78,7 +73,8 @@ function BaseValidateCodeForm({ validateError, handleSubmitForm, clearError, -}: BaseValidateCodeFormProps) { + buttonStyles, +}: ValidateCodeFormProps) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); const theme = useTheme(); @@ -87,6 +83,7 @@ function BaseValidateCodeForm({ const [formError, setFormError] = useState({}); const [validateCode, setValidateCode] = useState(''); const inputValidateCodeRef = useRef(null); + const [account = {}] = useOnyx(ONYXKEYS.ACCOUNT); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case const shouldDisableResendValidateCode = !!isOffline || account?.isLoading; const focusTimeoutRef = useRef(null); @@ -204,7 +201,7 @@ function BaseValidateCodeForm({ errorRowStyles={[styles.mt2]} onClose={() => User.clearValidateCodeActionError('actionVerified')} > - + clearError()} + style={buttonStyles} >