feat(card): Card authenticated info

app/components/UI/Card/Views/CardAuthentication/CardAuthentication.test.tsx

@@ -8,6 +8,7 @@ import { backgroundState } from '../../../../../util/test/initial-root-state';
 
 const mockNavigate = jest.fn();
 const mockGoBack = jest.fn();
+const mockReset = jest.fn();
 const mockDispatch = jest.fn();
 const mockAddListener = jest.fn(() => jest.fn());
 
@@ -16,6 +17,7 @@ jest.mock('@react-navigation/native', () => ({
   useNavigation: () => ({
     navigate: mockNavigate,
     goBack: mockGoBack,
+    reset: mockReset,
     dispatch: mockDispatch,
     addListener: mockAddListener,
   }),
@@ -343,9 +345,9 @@ describe('CardAuthentication Component', () => {
       fireEvent.press(loginButton);
 
       await waitFor(() => {
-        expect(mockDispatch).toHaveBeenCalledWith({
-          type: 'NAVIGATE',
-          routeName: Routes.CARD.HOME,
+        expect(mockReset).toHaveBeenCalledWith({
+          index: 0,
+          routes: [{ name: Routes.CARD.HOME }],
         });
       });
     });
@@ -370,7 +372,7 @@ describe('CardAuthentication Component', () => {
 
       // Verify that navigation doesn't happen when there's an error state
       // The component should not navigate when error exists
-      expect(mockDispatch).not.toHaveBeenCalled();
+      expect(mockReset).not.toHaveBeenCalled();
 
       // Verify error is displayed
       expect(screen.getByText('Invalid login details')).toBeOnTheScreen();
@@ -401,36 +403,41 @@ describe('CardAuthentication Component', () => {
   });
 
   describe('Loading State', () => {
-    it('shows loading state on login button when loading', () => {
-      mockUseCardProviderAuthentication.mockReturnValue({
-        login: mockLogin,
-        loading: true,
-        error: null,
-        clearError: mockClearError,
+    it('shows loading state on login button during login', async () => {
+      // Mock login to delay resolution so we can check loading state
+      let resolveLogin: (() => void) | undefined;
+      const loginPromise = new Promise<void>((resolve) => {
+        resolveLogin = resolve;
       });
+      mockLogin.mockReturnValue(loginPromise);
 
       render();
-
+      const emailInput = screen.getByPlaceholderText(
+        'Enter your email address',
+      );
+      const passwordInput = screen.getByPlaceholderText('Enter your password');
       const loginButton = screen.getByTestId(
         CardAuthenticationSelectors.VERIFY_ACCOUNT_BUTTON,
       );
-      expect(loginButton).toHaveProp('loading', true);
-    });
 
-    it('registers beforeRemove navigation listener', () => {
-      mockUseCardProviderAuthentication.mockReturnValue({
-        login: mockLogin,
-        loading: true,
-        error: null,
-        clearError: mockClearError,
+      fireEvent.changeText(emailInput, '[email protected]');
+      fireEvent.changeText(passwordInput, 'password123');
+      fireEvent.press(loginButton);
+
+      // Check loading state is true during login
+      await waitFor(() => {
+        expect(loginButton).toHaveProp('loading', true);
       });
 
-      render();
+      // Resolve the login
+      if (resolveLogin) {
+        resolveLogin();
+      }
 
-      expect(mockAddListener).toHaveBeenCalledWith(
-        'beforeRemove',
-        expect.any(Function),
-      );
+      // Wait for loading to finish
+      await waitFor(() => {
+        expect(loginButton).toHaveProp('loading', false);
+      });
     });
   });
 
@@ -487,21 +494,6 @@ describe('CardAuthentication Component', () => {
     });
   });
 
-  describe('Navigation Listener Cleanup', () => {
-    it('sets up navigation listener with cleanup function', () => {
-      const mockUnsubscribe = jest.fn();
-      mockAddListener.mockReturnValue(mockUnsubscribe);
-
-      render();
-
-      expect(mockAddListener).toHaveBeenCalledWith(
-        'beforeRemove',
-        expect.any(Function),
-      );
-      expect(mockAddListener).toHaveReturnedWith(mockUnsubscribe);
-    });
-  });
-
   describe('Accessibility', () => {
     it('has proper accessibility labels for form fields', () => {
       render();

app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Image,
   KeyboardAvoidingView,
@@ -30,19 +30,19 @@ import createStyles from './CardAuthentication.styles';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import useCardProviderAuthentication from '../../hooks/useCardProviderAuthentication';
 import { CardAuthenticationSelectors } from '../../../../../../e2e/selectors/Card/CardAuthentication.selectors';
-import { NavigationActions } from '@react-navigation/compat';
 import Routes from '../../../../../constants/navigation/Routes';
 import { CardLocation } from '../../types';
 import { strings } from '../../../../../../locales/i18n';
+import Logger from '../../../../../util/Logger';
 
 const CardAuthentication = () => {
-  const { dispatch, addListener } = useNavigation();
+  const navigation = useNavigation();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
   const [location, setLocation] = useState<CardLocation>('international');
-  const [loginSuccess, setLoginSuccess] = useState(false);
   const theme = useTheme();
-  const { login, loading, error, clearError } = useCardProviderAuthentication();
+  const { login, error, clearError } = useCardProviderAuthentication();
 
   const styles = createStyles(theme);
 
@@ -60,46 +60,29 @@ const CardAuthentication = () => {
     }
   };
 
-  useEffect(() => {
-    const unsubscribe = addListener('beforeRemove', (e) => {
-      if (loading) {
-        e.preventDefault();
-        return;
-      }
-
-      dispatch(e.data.action);
-    });
-
-    return unsubscribe;
-  }, [addListener, loading, dispatch]);
-
-  // Navigate to home after successful login when loading is complete
-  useEffect(() => {
-    if (loginSuccess && !loading && !error) {
-      dispatch(
-        NavigationActions.navigate({
-          routeName: Routes.CARD.HOME,
-        }),
-      );
-      setLoginSuccess(false); // Reset the flag
-    }
-  }, [loginSuccess, loading, error, dispatch]);
-
   const performLogin = useCallback(async () => {
-    await login({
-      location,
-      email,
-      password,
-    });
-
-    if (!error) {
-      setLoginSuccess(true);
+    try {
+      setLoading(true);
+      await login({
+        location,
+        email,
+        password,
+      });
+
+      navigation.reset({
+        index: 0,
+        routes: [{ name: Routes.CARD.HOME }],
+      });
+    } catch (err) {
+      Logger.log('CardAuthentication::Login failed', err);
+    } finally {
+      setLoading(false);
     }
-  }, [error, email, location, login, password]);
+  }, [email, location, login, password, navigation]);
 
   const isDisabled = useMemo(
-    () => loading || !!error || email.length === 0 || password.length === 0,
-    [loading, error, email, password],
+    () => !!error || email.length === 0 || password.length === 0,
+    [error, email, password],
   );
 
   return (

app/components/UI/Card/Views/CardHome/CardHome.styles.ts

@@ -35,6 +35,7 @@ const createStyles = (theme: Theme) =>
     },
     contentContainer: {
       flexGrow: 1,
+      paddingBottom: 32,
     },
     defaultHorizontalPadding: {
       paddingHorizontal: 16,
@@ -57,7 +58,6 @@ const createStyles = (theme: Theme) =>
     },
     cardImageContainer: {
       width: '100%',
-      marginTop: 8,
     },
     cardAssetItemContainer: {
       height: 80,
@@ -76,6 +76,11 @@ const createStyles = (theme: Theme) =>
       backgroundColor: theme.colors.background.default,
       width: '100%',
     },
+    spendingLimitDivider: {
+      height: 1,
+      backgroundColor: theme.colors.border.muted,
+      width: '100%',
+    },
     defaultMarginTop: {
       marginTop: 16,
     },
@@ -92,6 +97,9 @@ const createStyles = (theme: Theme) =>
     halfWidthButton: {
       width: '50%',
     },
+    shouldBeHidden: {
+      display: 'none',
+    },
   });
 
 export default createStyles;