From 55a077a390eeffa5832e68410ebc69df01ca966b Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Mon, 11 Nov 2024 16:16:58 +0800 Subject: [PATCH 1/4] Fix: Expensify card - Error when wrong 4 digit is used persists for a few sec after a refresh --- .../settings/Wallet/ActivatePhysicalCardPage.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx index 23b694fe0d40..1aa21668bb1c 100644 --- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx +++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useEffect, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; @@ -70,15 +70,19 @@ function ActivatePhysicalCardPage({ Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID)); }, [cardID, cardList, inactiveCard?.isLoading, inactiveCard?.state]); - useEffect( - () => () => { + useLayoutEffect(() => { + 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. From 5b131b5cd018ad5f7de4c46bde941ef8429451c4 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Thu, 14 Nov 2024 22:58:21 +0800 Subject: [PATCH 2/4] fix and migrate to useOnyx --- .../Wallet/ActivatePhysicalCardPage.tsx | 27 +++++++------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx index 1aa21668bb1c..534d4a7c2d90 100644 --- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx +++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx @@ -1,8 +1,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react'; +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 & StackScreenProps; +type ActivatePhysicalCardPageProps = StackScreenProps; 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 [shouldShowError, setShouldShowError] = useState(false); const inactiveCard = cardList?.[cardID]; const cardError = ErrorUtils.getLatestErrorMessage(inactiveCard ?? {}); @@ -70,7 +64,7 @@ function ActivatePhysicalCardPage({ Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID)); }, [cardID, cardList, inactiveCard?.isLoading, inactiveCard?.state]); - useLayoutEffect(() => { + useEffect(() => { if (!inactiveCard?.cardID) { return; } @@ -106,6 +100,7 @@ function ActivatePhysicalCardPage({ }; const submitAndNavigateToNextPage = useCallback(() => { + setShouldShowError(true); activateCardCodeInputRef.current?.blur(); if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) { @@ -144,7 +139,7 @@ function ActivatePhysicalCardPage({ lastPressedDigit={lastPressedDigit} onChangeText={onCodeInput} onFulfill={submitAndNavigateToNextPage} - errorText={formError || cardError} + errorText={shouldShowError ? formError || cardError : ''} ref={activateCardCodeInputRef} /> @@ -168,8 +163,4 @@ function ActivatePhysicalCardPage({ ActivatePhysicalCardPage.displayName = 'ActivatePhysicalCardPage'; -export default withOnyx({ - cardList: { - key: ONYXKEYS.CARD_LIST, - }, -})(ActivatePhysicalCardPage); +export default ActivatePhysicalCardPage; From 3dff8e7f444397193683ada28a921ec1a73c331c Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Wed, 27 Nov 2024 12:36:53 +0800 Subject: [PATCH 3/4] minor fix --- src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx index 534d4a7c2d90..3c034343de76 100644 --- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx +++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx @@ -46,7 +46,7 @@ function ActivatePhysicalCardPage({ const [formError, setFormError] = useState(''); const [lastFourDigits, setLastFourDigits] = useState(''); const [lastPressedDigit, setLastPressedDigit] = useState(''); - const [shouldShowError, setShouldShowError] = useState(false); + const [shouldAllowToShowError, setShouldAllowToShowError] = useState(false); const inactiveCard = cardList?.[cardID]; const cardError = ErrorUtils.getLatestErrorMessage(inactiveCard ?? {}); @@ -100,7 +100,7 @@ function ActivatePhysicalCardPage({ }; const submitAndNavigateToNextPage = useCallback(() => { - setShouldShowError(true); + setShouldAllowToShowError(true); activateCardCodeInputRef.current?.blur(); if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) { @@ -139,7 +139,7 @@ function ActivatePhysicalCardPage({ lastPressedDigit={lastPressedDigit} onChangeText={onCodeInput} onFulfill={submitAndNavigateToNextPage} - errorText={shouldShowError ? formError || cardError : ''} + errorText={shouldAllowToShowError ? formError || cardError : ''} ref={activateCardCodeInputRef} /> From 7444aea3f2c0a198eb59fd1b5c1282845da69f9b Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Wed, 27 Nov 2024 23:53:32 +0800 Subject: [PATCH 4/4] minor fix --- src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx index 3c034343de76..7c0d8ed38fb8 100644 --- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx +++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx @@ -46,7 +46,7 @@ function ActivatePhysicalCardPage({ const [formError, setFormError] = useState(''); const [lastFourDigits, setLastFourDigits] = useState(''); const [lastPressedDigit, setLastPressedDigit] = useState(''); - const [shouldAllowToShowError, setShouldAllowToShowError] = useState(false); + const [canShowError, setCanShowError] = useState(false); const inactiveCard = cardList?.[cardID]; const cardError = ErrorUtils.getLatestErrorMessage(inactiveCard ?? {}); @@ -100,7 +100,7 @@ function ActivatePhysicalCardPage({ }; const submitAndNavigateToNextPage = useCallback(() => { - setShouldAllowToShowError(true); + setCanShowError(true); activateCardCodeInputRef.current?.blur(); if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) { @@ -139,7 +139,7 @@ function ActivatePhysicalCardPage({ lastPressedDigit={lastPressedDigit} onChangeText={onCodeInput} onFulfill={submitAndNavigateToNextPage} - errorText={shouldAllowToShowError ? formError || cardError : ''} + errorText={canShowError ? formError || cardError : ''} ref={activateCardCodeInputRef} />