Merge pull request #55163 from callstack-internal/update-fraud-flow-for-virtual-card

Redirect user for new virtual card after Fraud flow

Author: lakchote

src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx

@@ -11,12 +11,12 @@ import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {requestValidateCodeAction} from '@libs/actions/User';
-import * as ErrorUtils from '@libs/ErrorUtils';
+import {getLatestErrorMessage, getLatestErrorMessageField} from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
-import * as Card from '@userActions/Card';
+import {clearCardListErrors, reportVirtualExpensifyCardFraud} from '@userActions/Card';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -39,8 +39,10 @@ function ReportVirtualCardFraudPage({
     const loginData = loginList?.[primaryLogin];
 
     const virtualCard = cardList?.[cardID];
-    const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard);
-    const validateError = ErrorUtils.getLatestErrorMessageField(virtualCard);
+    const latestIssuedVirtualCardID = Object.keys(cardList ?? {})?.pop();
+    const virtualCardError = getLatestErrorMessage(virtualCard);
+    const validateError = getLatestErrorMessageField(virtualCard);
+    const prevVirtualCard = usePrevious(virtualCard);
 
     const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
 
@@ -56,15 +58,18 @@ function ReportVirtualCardFraudPage({
             return;
         }
 
-        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID));
-    }, [cardID, formData?.isLoading, prevIsLoading, virtualCard?.errors]);
+        if (latestIssuedVirtualCardID) {
+            Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(latestIssuedVirtualCardID));
+        }
+    }, [cardID, formData?.isLoading, prevIsLoading, virtualCard?.errors, latestIssuedVirtualCardID]);
 
     const handleValidateCodeEntered = useCallback(
         (validateCode: string) => {
             if (!virtualCard) {
                 return;
             }
-            Card.reportVirtualExpensifyCardFraud(virtualCard, validateCode);
+            reportVirtualExpensifyCardFraud(virtualCard, validateCode);
+            setIsValidateCodeActionModalVisible(false);
         },
         [virtualCard],
     );
@@ -81,7 +86,7 @@ function ReportVirtualCardFraudPage({
         setIsValidateCodeActionModalVisible(true);
     }, [setIsValidateCodeActionModalVisible]);
 
-    if (isEmptyObject(virtualCard)) {
+    if (isEmptyObject(virtualCard) && isEmptyObject(prevVirtualCard)) {
         return <NotFoundPage />;
     }
 
@@ -106,7 +111,10 @@ function ReportVirtualCardFraudPage({
                     sendValidateCode={sendValidateCode}
                     validateError={validateError}
                     clearError={() => {
-                        Card.clearCardListErrors(virtualCard.cardID);
+                        if (!virtualCard?.cardID) {
+                            return;
+                        }
+                        clearCardListErrors(virtualCard.cardID);
                     }}
                     onClose={() => setIsValidateCodeActionModalVisible(false)}
                     isVisible={isValidateCodeActionModalVisible}