Merge pull request Expensify#52303 from nyomanjyotisa/issue-51396

Fix: Expensify card - Error when wrong 4 digit is used persists for a few sec after a refresh
software-mansion-labs · Dec 4, 2024 · 00f0dee · 00f0dee
2 parents ce282d3 + 07290cb
commit 00f0dee
Showing 1 changed file with 16 additions and 21 deletions.
diff --git 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<Record<string, Card>>;
-};
-
-type ActivatePhysicalCardPageProps = ActivatePhysicalCardPageOnyxProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_ACTIVATE>;
+type ActivatePhysicalCardPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_ACTIVATE>;
 
 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<boolean>(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}
                 />
             </View>
@@ -164,8 +163,4 @@ function ActivatePhysicalCardPage({
 
 ActivatePhysicalCardPage.displayName = 'ActivatePhysicalCardPage';
 
-export default withOnyx<ActivatePhysicalCardPageProps, ActivatePhysicalCardPageOnyxProps>({
-    cardList: {
-        key: ONYXKEYS.CARD_LIST,
-    },
-})(ActivatePhysicalCardPage);
+export default ActivatePhysicalCardPage;