diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx index bdc8928f362b..3c24e0388865 100644 --- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx +++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx @@ -1,7 +1,6 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import BigNumberPad from '@components/BigNumberPad'; import Button from '@components/Button'; import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; @@ -25,21 +24,14 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; -import type {Card} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type ActivatePhysicalCardPageOnyxProps = { - /** Card list propTypes */ - cardList: OnyxEntry>; -}; - -type ActivatePhysicalCardPageProps = ActivatePhysicalCardPageOnyxProps & PlatformStackScreenProps; +type ActivatePhysicalCardPageProps = PlatformStackScreenProps; const LAST_FOUR_DIGITS_LENGTH = 4; const MAGIC_INPUT_MIN_HEIGHT = 86; function ActivatePhysicalCardPage({ - cardList, route: { params: {cardID = ''}, }, @@ -49,10 +41,12 @@ function ActivatePhysicalCardPage({ const {isExtraSmallScreenHeight} = useResponsiveLayout(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); + const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST); const [formError, setFormError] = useState(''); const [lastFourDigits, setLastFourDigits] = useState(''); const [lastPressedDigit, setLastPressedDigit] = useState(''); + const [canShowError, setCanShowError] = useState(false); const inactiveCard = cardList?.[cardID]; const cardError = ErrorUtils.getLatestErrorMessage(inactiveCard ?? {}); @@ -70,15 +64,19 @@ function ActivatePhysicalCardPage({ Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID)); }, [cardID, cardList, inactiveCard?.isLoading, inactiveCard?.state]); - useEffect( - () => () => { + useEffect(() => { + if (!inactiveCard?.cardID) { + return; + } + CardSettings.clearCardListErrors(inactiveCard?.cardID); + + return () => { if (!inactiveCard?.cardID) { return; } CardSettings.clearCardListErrors(inactiveCard?.cardID); - }, - [inactiveCard?.cardID], - ); + }; + }, [inactiveCard?.cardID]); /** * Update lastPressedDigit with value that was pressed on BigNumberPad. @@ -102,6 +100,7 @@ function ActivatePhysicalCardPage({ }; const submitAndNavigateToNextPage = useCallback(() => { + setCanShowError(true); activateCardCodeInputRef.current?.blur(); if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) { @@ -140,7 +139,7 @@ function ActivatePhysicalCardPage({ lastPressedDigit={lastPressedDigit} onChangeText={onCodeInput} onFulfill={submitAndNavigateToNextPage} - errorText={formError || cardError} + errorText={canShowError ? formError || cardError : ''} ref={activateCardCodeInputRef} /> @@ -164,8 +163,4 @@ function ActivatePhysicalCardPage({ ActivatePhysicalCardPage.displayName = 'ActivatePhysicalCardPage'; -export default withOnyx({ - cardList: { - key: ONYXKEYS.CARD_LIST, - }, -})(ActivatePhysicalCardPage); +export default ActivatePhysicalCardPage;